หน่วยขนาดใน CSS (px rem em vh)
สำหรับขนาดฟอนต์ UI ให้ใช้ rem เป็นหลัก แล้วใช้ px เฉพาะเส้นขอบบางจริง ๆ
| หน่วย | อิงกับ | การใช้งานทั่วไป |
|---|---|---|
| px | พิกเซลอุปกรณ์ (พิกเซล CSS) | เส้นขอบ, ไอคอนที่ต้องแม่นยำ |
| rem | ขนาดฟอนต์ของราก | มาตราส่วนฟอนต์, ระยะห่าง |
| em | ขนาดฟอนต์ขององค์ประกอบแม่ | กำหนดขนาดเฉพาะในคอมโพเนนต์ |
| % | พร็อพเพอร์ตี้ขององค์ประกอบแม่ | ความกว้าง, เลย์เอาต์ยืดหยุ่น |
| vw | 1% ของความกว้างวิวพอร์ต | เซกชันเต็มขอบ |
| vh | 1% ของความสูงวิวพอร์ต | ความสูงฮีโร่ (ระวัง UI มือถือ) |
| vmin / vmax | ด้านสั้น/ยาวของวิวพอร์ต | ขนาดรับผิวแบบเกือบสี่เหลี่ยม |
| ch | ความกว้างของอักขระ “0” | บล็อกโค้ด, ฟิลด์ monospace |
| ex | ความสูง x ของฟอนต์ | งานอักษรละเอียดที่พบน้อย |
| svh / lvh / dvh | วิวพอร์ต เล็ก/ใหญ่/ไดนามิก | ความสูงปลอดภัยบนเบราว์เซอร์มือถือ |
หมายเหตุ
- บนมือถือ 100vh อาจรวมแถบเบราว์เซอร์ที่ซ่อนอยู่ — ถ้ารองรับให้ใช้ dvh/svh
- ขนาดฟอนต์ที่ผู้ใช้ตั้งไว้มีผลต่อ rem — ซึ่งมักดีต่อการเข้าถึง
คำถามที่พบบ่อย
- 1rem เท่ากับกี่ px?
- 1rem เท่ากับขนาดฟอนต์ของราก โดยค่าเริ่มต้น 16px จะได้ 1rem = 16px
- em กับ rem ต่างกันอย่างไร?
- rem อิงขนาดฟอนต์ของรากเสมอ ส่วน em อิงขนาดฟอนต์ที่องค์ประกอบปัจจุบันสืบทอดมา
- ทำไม 100vh บนมือถือจึงไม่แม่นยำ?
- เบราว์เซอร์มือถือซ่อน/แสดงแถบที่อยู่ ทำให้ 100vh ใหญ่กว่าพื้นที่มองเห็น ถ้ารองรับให้ใช้ dvh หรือ svh