ใช้ Ems เพื่อเปลี่ยนขนาดแบบอักษร
เมื่อคุณสร้างเว็บเพจผู้เชี่ยวชาญส่วนใหญ่แนะนำให้คุณใช้แบบอักษรขนาด (และในความเป็นจริงทุกอย่าง) ด้วยการวัดสัมพัทธ์เช่นเอ็มเอสเอ็มเอสเปอร์เซ็นต์หรือพิกเซล เนื่องจากคุณจริงๆไม่ทราบวิธีต่างๆที่ผู้อื่นอาจดูเนื้อหาของคุณ และถ้าคุณใช้ค่าสัมบูรณ์ (นิ้ว, เซนติเมตร, มิลลิเมตร, จุดหรือ picas) อาจส่งผลต่อการแสดงผลหรือการอ่านหน้าเว็บในอุปกรณ์ต่างๆ
และ W3C แนะนำให้คุณใช้ EMS สำหรับขนาด
แต่วิธีการใหญ่เป็น Em?
ตาม W3C em:
"เท่ากับค่าที่คำนวณได้ของคุณสมบัติ 'font-size' ขององค์ประกอบที่ใช้งานข้อยกเว้นคือเมื่อ 'em' เกิดขึ้นในค่าของคุณสมบัติ 'font-size' ซึ่งในกรณีนี้หมายถึง ขนาดตัวอักษรขององค์ประกอบหลัก "
กล่าวอีกนัยหนึ่ง ems ไม่มีขนาดแน่นอน พวกเขาใช้ค่าตามขนาดของพวกเขาตามที่พวกเขาอยู่ สำหรับ นักออกแบบเว็บ ส่วนใหญ่หมายความว่าพวกเขาอยู่ในเว็บเบราเซอร์ดังนั้นแบบอักษรที่สูง 1 เมตรจึงมีขนาดเท่ากับขนาดตัวอักษรเริ่มต้นสำหรับเบราเซอร์นั้น
แต่ขนาดที่เป็นค่าเริ่มต้นคือเท่าใด? ไม่มีทางใดที่จะเป็นไปได้ 100% เนื่องจากลูกค้าสามารถเปลี่ยนขนาดตัวอักษรเริ่มต้นในเบราว์เซอร์ได้ แต่เนื่องจากคนส่วนใหญ่ไม่สามารถสมมติได้ว่าเบราว์เซอร์ส่วนใหญ่มีขนาดตัวอักษรเริ่มต้นคือ 16px ดังนั้นส่วนมากของเวลา 1em = 16px
คิดในพิกเซลใช้ Ems สำหรับการวัด
เมื่อคุณรู้ว่าขนาดตัวอักษรเริ่มต้นคือ 16px คุณสามารถใช้ ems เพื่อให้ลูกค้าสามารถปรับขนาดหน้าได้ง่าย แต่คิดเป็นพิกเซลสำหรับขนาดแบบอักษรของคุณ
สมมติว่าคุณมีโครงสร้างการปรับขนาดบางอย่างเช่นนี้
- บรรทัดแรก 1 - 20px
- บรรทัดแรก 2 - 18px
- บรรทัดแรก 3 - 16px
- ข้อความหลัก - 14px
- ข้อความย่อย - 12px
- เชิงอรรถ - 10px
คุณสามารถกำหนดได้โดยใช้พิกเซลสำหรับการวัด แต่ทุกคนที่ใช้ IE 6 และ 7 จะไม่สามารถปรับขนาดหน้าของคุณได้ดี ดังนั้นคุณควรแปลงขนาดเป็น ems และนี่เป็นเพียงเรื่องของคณิตศาสตร์บางส่วน:
- บรรทัดแรก 1 - 1.25em (16 x 1.25 = 20)
- บรรทัดแรก 2 - 1.125em (16 × 1.125 = 18)
- บรรทัดแรก 3 - 1EM (1EM = 16px)
- ข้อความหลัก - 0.875em (16 x 0.875 = 14)
- ข้อความย่อย - 0.75em (16 x 0.75 = 12)
- เชิงอรรถ - 0.625em (16 x 0.625 = 10)
อย่าลืมสืบทอด!
แต่นั่นไม่ใช่ทั้งหมดที่มีให้กับ ems สิ่งอื่น ๆ ที่คุณต้องจำไว้ก็คือพวกเขาใช้เวลากับขนาดของผู้ปกครอง ดังนั้นหากคุณมีองค์ประกอบซ้อนกันที่มีขนาดตัวอักษรแตกต่างกันคุณอาจท้ายด้วยแบบอักษรขนาดเล็กหรือใหญ่กว่าที่คุณคาดหวัง
ตัวอย่างเช่นคุณอาจมีสไตล์ชีทเช่นนี้:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
ซึ่งจะส่งผลให้มีแบบอักษร 14px และ 10px สำหรับข้อความหลักและเชิงอรรถตามลำดับ แต่ถ้าคุณใส่เชิงอรรถภายในย่อหน้าคุณอาจท้ายด้วยข้อความที่มีขนาด 8.75px มากกว่า 10px ลองใช้ CSS นี้และ HTML ต่อไปนี้เป็นเอกสาร:
แบบอักษรนี้มีความสูง 14px หรือ 0.875 ems
ย่อหน้านี้มีเชิงอรรถอยู่
ขณะนี้เป็นเพียงย่อหน้าเชิงอรรถ
ข้อความเชิงอรรถยากที่จะอ่านที่ 10px ซึ่งเกือบอ่านไม่ได้ที่ 8.75px
ดังนั้นเมื่อคุณใช้อีเอ็มเอสคุณจะต้องตระหนักถึงขนาดของออบเจ็กต์หลักหรือคุณจะพบกับองค์ประกอบที่มีขนาดแปลก ๆ บนหน้าของคุณ