พิกเซลเป็น em
แปลง px เป็น em โดยใช้ขนาดฟอนต์ขององค์ประกอบพาเรนต์ em สัมพันธ์กับพาเรนต์ทันที — มีประโยชน์เมื่อแพดดิงปุ่มควรปรับตามข้อความป้าย หรือการเยื้องรายการซ้อนตามขนาดเนื้อหาท้องถิ่น
วิธีแปลง px เป็น em
1. ระบุขนาดฟอนต์ขององค์ประกอบพาเรนต์เป็น px (เช่น 18 px)
2. ใส่ค่า px ที่จะแปลง (เช่น letter-spacing 9 px)
3. อ่านผล em (9 ÷ 18 = 0.5 em)
4. ใช้ใน CSS บนองค์ประกอบลูกที่อยู่ในบริบทพาเรนต์นั้น
ตัวอย่าง px เป็น em
แพดดิงปุ่ม
ฟอนต์พาเรนต์ 16 px แพดดิงแนวตั้ง 8 px → 0.5 em ปรับหากพาเรนต์เป็น 18 px บนจอใหญ่
พาดหัวซ้อน
ฟอนต์ส่วน 20 px พาดหัวย่อยดีไซน์ 24 px → 1.2 em สัมพันธ์กับส่วน ไม่ใช่ราก
การจัดไอคอน
ไอคอนอินไลน์ 14 px กับบรรทัดข้อความ 16 px → กล่องไอคอน 0.875 em จัดกับเมตริกข้อความ
เมื่อไหร่ควรแปลง px เป็น em
• เมื่อภายในคอมโพเนนต์ควรปรับตามการเปลี่ยนขนาดฟอนต์ท้องถิ่น
• เมื่อจัดสไตล์ข้อความสมบูรณ์ที่พาดหัวอยู่ในคอนเทนเนอร์ขนาดต่างกัน
• เมื่อ CSS รุ่นเก่าใช้ em และคุณแมปดีไซน์ px ใหม่เข้าสู่ระบบเดียวกัน
หลีกเลี่ยงหลุมพรางการสะสมของ em
เมนูซ้อนลึกด้วย font-size: 0.9em ในแต่ละระดับทำให้ข้อความหดโดยไม่คาดคิด ชอบ rem สำหรับ font-size ในระดับโครงสร้าง ใช้ em สำหรับแพดดิงท้องถิ่นที่ผูกกับพาเรนต์เดียว บันทึกสมมติฐานพาเรนต์ในโทเค็นดีไซน์
คำถามที่พบบ่อย
em กับ rem ต่างกันอย่างไร?
em อ้างขนาดฟอนต์พาเรนต์ rem อ้างขนาดฟอนต์ราก (html) เท่านั้น
ทำไม em ซ้อนสะสม?
แต่ละระดับคูณ: 1.2 em ในพาเรนต์ 1.2 em = 1.44 × รากหากทั้งคู่ใช้กับโซ่ font-size
สูตร?
em = px ÷ parentFontSizePx ใช้ขนาดฟอนต์ที่คำนวณได้ของพาเรนต์โดยตรงเสมอ
แพดดิงเป็น em?
ได้ — แพดดิง/มาร์จินเป็น em ปรับตาม font-size ขององค์ประกอบเอง (สำหรับมาร์จิน/แพดดิง สเปกใช้ขนาดฟอนต์องค์ประกอบ)
em เริ่มต้นเมื่อไหร่?
ตามประเพณีคือ “ความกว้างของตัวพิมพ์ใหญ่ M” ในตัวพิมพ์โลหะ ตอนนี้นิยามสัมพันธ์กับ font-size ใน CSS