ตัวแปลงหน่วย CSS
แปลงระหว่าง px, rem, em และ pt ตั้งขนาดฟอนต์พื้นฐานสำหรับผลลัพธ์ที่แม่นยำ
พอยต์ (pt):12pt
ขนาดฟอนต์ของ <html> บนเว็บไซต์ (ค่าเริ่มต้นของเบราว์เซอร์คือ 16px)
rem สัมพัทธ์กับขนาดฟอนต์ของ <html> ค่าเริ่มต้นของเบราว์เซอร์คือ 16px ดังนั้น 1rem = 16px ยกเว้นจะมีการเปลี่ยนแปลง
1pt = 1.333px ที่ 96 DPI ใช้หลักใน print CSS และเครื่องมือออกแบบ
ขนาด CSS ที่พบบ่อย
| px | rem | pt | การใช้งานทั่วไป |
|---|---|---|---|
| 8 | 0.5 | 6 | ไอคอน / border-radius |
| 10 | 0.625 | 7.5 | โค้ด ข้อความเล็ก |
| 12 | 0.75 | 9 | ข้อความเล็ก / คำแนะนำ |
| 14 | 0.875 | 10.5 | เนื้อหา (กะทัดรัด) |
| 16 | 1 | 12 | เนื้อหาเริ่มต้น |
| 18 | 1.125 | 13.5 | เนื้อหา (สบาย) |
| 20 | 1.25 | 15 | ข้อความใหญ่ / คำบรรยาย |
| 24 | 1.5 | 18 | H3 / หัวข้อใหญ่ |
| 32 | 2 | 24 | H2 / หัวข้อหลัก |
| 48 | 3 | 36 | H1 / หัวหน้าหลัก |
คํา ถาม ที่ ถาม บ่อย ๆ
px (พิกเซล) เป็นหน่วยสัมบูรณ์ที่แสดงขนาดเดิมเสมอ rem (root em) สัมพัทธ์กับขนาดฟอนต์ของ <html> — ที่ค่าเริ่มต้น 16px: 1rem = 16px, 2rem = 32px em สัมพัทธ์กับขนาดฟอนต์ของ element แม่ rem เหมาะสำหรับเลย์เอาต์ที่ปรับขนาดได้
หารค่าพิกเซลด้วยขนาดฟอนต์หลัก ที่ค่าเริ่มต้น 16px: rem = px ÷ 16 เช่น: 24px ÷ 16 = 1.5rem, 32px ÷ 16 = 2rem นักพัฒนาหลายคนตั้ง html { font-size: 62.5%; } เพื่อให้ 1rem = 10px
ที่ขนาดฟอนต์พื้นฐาน 16px: 16px = 1rem ค่าสำคัญ: 8px = 0.5rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem
rem เคารพการตั้งค่าขนาดฟอนต์ของเบราว์เซอร์ผู้ใช้ ซึ่งสำคัญสำหรับ accessibility ผู้ใช้ที่ต้องการตัวอักษรใหญ่สามารถเพิ่มขนาดฟอนต์พื้นฐานของเบราว์เซอร์ และค่า rem ทั้งหมดจะปรับขนาดโดยอัตโนมัติ