เครื่องแปลง CSS px ↔ rem
แปลงระหว่างหน่วย CSS px และ rem
px (พิกเซล)
หน่วยสัมบูรณ์ที่แสดงถึงหนึ่งพิกเซลบนหน้าจอ มีขนาดคงที่และมีข้อจำกัดสำหรับการออกแบบแบบ responsive
rem (Root EM)
หน่วยสัมพัทธ์ที่ขึ้นอยู่กับขนาดฟอนต์ของ root element (html) เป็นประโยชน์สำหรับการเข้าถึงและการออกแบบแบบ responsive
สูตรการแปลง
คำแนะนำการใช้งาน
- • ขนาดฟอนต์: แนะนำให้ใช้ rem
- • ระยะห่าง (margin, padding): แนะนำให้ใช้ rem
- • เส้นขอบ: ใช้ px ได้
- • Media queries: แนะนำให้ใช้ rem
คู่มือหน่วย CSS ฉบับสมบูรณ์
การเลือกหน่วย CSS ที่เหมาะสมในการพัฒนาเว็บมีผลอย่างมากต่อประสบการณ์ผู้ใช้และการเข้าถึง เรียนรู้ความแตกต่างระหว่าง px และ rem และวิธีการใช้งานในสถานการณ์ที่เหมาะสม
📐 คุณสมบัติ
- • หน่วยสัมบูรณ์ที่สอดคล้องกับพิกเซลบนหน้าจอแบบ 1:1
- • ขนาดคงที่ในทุกเบราว์เซอร์
- • สามารถควบคุมเค้าโครงได้อย่างแม่นยำ
- • ไม่ได้รับผลกระทบจากการตั้งค่าของผู้ใช้
✅ กรณีการใช้งานที่แนะนำ
- • ความหนาของเส้นขอบ (1px, 2px)
- • ระยะห่างเงา
- • ขนาดไอคอน (16px, 24px)
- • การปรับระยะห่างอย่างละเอียด
⚠️ ข้อควรระวัง
- • ละเว้นการตั้งค่าขนาดฟอนต์ของผู้ใช้
- • อาจทำให้เกิดปัญหาการเข้าถึง
- • จำกัดสำหรับการออกแบบที่ตอบสนอง
📐 คุณสมบัติ
- • อิงตามขนาดฟอนต์ของ root element (HTML)
- • สะท้อนการตั้งค่าของผู้ใช้
- • รักษาสัดส่วนที่สอดคล้องกัน
- • เป็นมิตรกับการเข้าถึง
✅ กรณีการใช้งานที่แนะนำ
- • การตั้งค่าขนาดฟอนต์
- • ระยะห่าง (margin, padding)
- • ขนาดคอนเทนเนอร์
- • จุดแบ่ง Media Query
💡 ข้อดี
- • รักษาสัดส่วนเมื่อปรับขนาด
- • ปรับปรุงการเข้าถึง
- • บำรุงรักษาง่าย
🎯 กลยุทธ์การใช้งานเฉพาะหน่วย
การจัดพิมพ์
ใช้ rem สำหรับขนาดฟอนต์และระยะห่างบรรทัด rem
เค้าโครง
ใช้ rem สำหรับระยะห่างและคอนเทนเนอร์ rem
รายละเอียด
ใช้ px สำหรับเส้นขอบและเงา px
📱 เคล็ดลับการออกแบบที่ตอบสนอง
แนวทาง Mobile-First
ตั้งค่าขนาดฟอนต์พื้นฐานเป็น 16px และปรับขนาดด้วยหน่วย rem
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }การใช้งาน Media Query
รักษาสอดคล้องกับจุดแบ่งที่ใช้ rem
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ ข้อควรพิจารณาด้านการเข้าถึง
✅ แนวทางปฏิบัติที่แนะนำ
- • ตั้งค่าขนาดฟอนต์ด้วยหน่วย rem
- • รักษาระดับฟอนต์ขั้นต่ำ 16px
- • ระยะห่างบรรทัดที่เพียงพอ (1.5 หรือมากกว่า)
- • เป้าหมายการสัมผัสขั้นต่ำ 44px
❌ สิ่งที่ควรหลีกเลี่ยง
- • การใช้ค่า px คงที่สำหรับขนาดฟอนต์
- • ข้อความขนาดเล็กกว่า 12px
- • ความกว้างคอนเทนเนอร์คงที่
- • ระยะห่างบรรทัด 1.0 หรือน้อยกว่า
🔧 การสนับสนุนเบราว์เซอร์และความเข้ากันได้
หน่วย px
รองรับอย่างสมบูรณ์ในทุกเบราว์เซอร์ ใช้งานได้ตั้งแต่ IE6+
หน่วย rem
รองรับอย่างสมบูรณ์ใน IE9+ และเบราว์เซอร์สมัยใหม่ จำเป็นต้องมี Fallback สำหรับ IE8 และต่ำกว่า
สำหรับการสนับสนุน IE8: ประกาศค่า px ก่อน จากนั้นเพิ่มค่า rem เป็น fallback
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */