Show กำหนด font-size อย่างไรให้เหมาะสม ?จากคุณสมบัติของทั้ง 3 หน่วย ข้างต้น ทำให้เราสามารถนำมาประยุกต์ใช้ในการทำเว็บได้ดังนี้
Workshopเพื่อให้เห็นภาพมากขึ้น เราลองมาทำตามขั้นตอนดังกล่าวตั้งแต่เริ่มกันเลยดีกว่า 1. กำหนด font-size ที่ html ให้เป็น %ในขั้นตอนแรก เราจะต้องกำหนด 2. กำหนด font-size ที่ body ด้วย emต่อมาให้เรากำหนด 3. กำหนด font-size ที่กล่องเนื้อหาด้วย remในการกำหนดขนาดตัวหนังสือให้กับกล่องเนื้อหา ให้เราใช้หน่วย rem เสมอ โดยขนาดที่จะกำหนดนั้นให้ยึดจากขนาดของตัวหนังสือ “ปกติ” ภายในกล่องนั้นๆ เป็นหลัก เช่น เนื้อหาที่ mark up ด้วย สำหรับองค์ประกอบต่างๆ ภายในกล่องเนื้อหา ให้เราใช้ em เสมอ จากตัวอย่างก่อนหน้านี้ ที่เราจะสร้างกล่องไฮไลท์ ให้เรากำหนด .highlight{ font-size: 20px; font-size: 2.0rem; } จัดการ font-size โดยรวมด้วย Sassหากงานของเรามีขนาดใหญ่พอสมควรหรือมีคนทำร่วมกันหลายคน เราอาจพบปัญหาเกี่ยวกับการกำหนด เพียงเท่านี้ เราก็จะรู้หมดว่า Responsive Web Design
โค้ดขนาดตัวอักษร มีกี่ระดับ อะไรบ้าง</Hn> ใช้กำหนดขนาดของหัวเรื่องมีอยู่ 6 ระดับ คือ H1,H2,H3,H4,H5 และ H6 โดยจะเรียงจากขนาดใหญ่ไปหาเล็ก สำหรับ IE และ Opera.
การกำหนดขนาดตัวอักษรมีกี่วิธีขนาดของตัวอักษร จะกำหนดโดยใช้ตัวเลขที่มีค่า 1 - 7 เป็นตัวกำหนด โดยค่าตัวเลข 1 และ 2 จะเป็นการย่อขนาดของตัวอักษร ค่าตัวเลข 3 ตัวอักษรจะอยู่ในระดับมาตราฐาน และค่าตัวเลข 4 ถึง 7 จะเป็นตัวอักษรใหญ่ขึ้น ตามลำดับ
ขนาดของตัวอักษรมีกี่ขนาดขนาดของตัวอักษรเป็นการกำหนดขนาดที่เป็นสัดส่วนความกว้าง และสูงและรูปร่างของตัวอักษร โดยเอาความสูงเป็นหลักในการจัดขนาดเรียกว่า พอยต์ (Point) ขนาดตัวอักษรหัวเรื่องมักใช้ขนาดตั้งแต่ 16 พอยต์ขึ้นไป ส่วนขนาดของเนื้อหาจะใช้ขนาดประมาณ 6 พอยต์ถึง 16 พอยต์ แล้วแต่ลักษณะของงานนั้น ๆ 12 พอยต์ = 1 ไพก้า 6 ไพก้า = 1 นิ้ว (2.5 ซ.ม.)
การกําหนดสีของตัวอักษร มีกี่แบบ อะไรบ้างการกำหนดสีให้กับพื้นหลังและตัวอักษรนั้นสามารถกำหนดได้ 2 รูปแบบดังนี้ แบบที่ 1 แบบระบุชื่อสี เช่น red, green, blue, yellow เป็นต้น แบบที่ 2 แบบระบุด้วยเลขฐาน 16 หรือ หลักการผสมสีแบบ RGB เช่น เช่นการกำหนดสีพื้นหลังของเว็บเพจเป็นสีเขียวและกำหนดให้สีอักษรเป็นสีแดง
|