เครื่องแปลง CSS px ↔ rem

แปลงระหว่างหน่วย CSS px และ rem

เครื่องมือแปลงหน่วย CSS

แปลงพิกเซล (px) เป็นหน่วย rem

ขนาดฟอนต์พื้นฐาน (px)

พิกเซล (px)

rem

คำอธิบายหน่วย CSS

px (พิกเซล)

หน่วยสัมบูรณ์ที่แสดงถึงหนึ่งพิกเซลบนหน้าจอ มีขนาดคงที่และมีข้อจำกัดสำหรับการออกแบบแบบ responsive

rem (Root EM)

หน่วยสัมพัทธ์ที่ขึ้นอยู่กับขนาดฟอนต์ของ root element (html) เป็นประโยชน์สำหรับการเข้าถึงและการออกแบบแบบ responsive

สูตรการแปลง

px → rem: px ÷ ขนาดฟอนต์พื้นฐาน

rem → px: rem × ขนาดฟอนต์พื้นฐาน

คำแนะนำการใช้งาน

• ขนาดฟอนต์: แนะนำให้ใช้ rem
• ระยะห่าง (margin, padding): แนะนำให้ใช้ rem
• เส้นขอบ: ใช้ px ได้
• Media queries: แนะนำให้ใช้ rem

ค่าการแปลงทั่วไป

rem

8px

0.5rem

12px

0.75rem

14px

0.875rem

16px

1rem

18px

1.125rem

20px

1.25rem

24px

1.5rem

32px

2rem

คู่มือหน่วย CSS ฉบับสมบูรณ์

การเลือกหน่วย CSS ที่เหมาะสมในการพัฒนาเว็บมีผลอย่างมากต่อประสบการณ์ผู้ใช้และการเข้าถึง เรียนรู้ความแตกต่างระหว่าง px และ rem และวิธีการใช้งานในสถานการณ์ที่เหมาะสม

คู่มือเชิงลึกหน่วยพิกเซล (px)

📐 คุณสมบัติ

• หน่วยสัมบูรณ์ที่สอดคล้องกับพิกเซลบนหน้าจอแบบ 1:1
• ขนาดคงที่ในทุกเบราว์เซอร์
• สามารถควบคุมเค้าโครงได้อย่างแม่นยำ
• ไม่ได้รับผลกระทบจากการตั้งค่าของผู้ใช้

✅ กรณีการใช้งานที่แนะนำ

• ความหนาของเส้นขอบ (1px, 2px)
• ระยะห่างเงา
• ขนาดไอคอน (16px, 24px)
• การปรับระยะห่างอย่างละเอียด

⚠️ ข้อควรระวัง

• ละเว้นการตั้งค่าขนาดฟอนต์ของผู้ใช้
• อาจทำให้เกิดปัญหาการเข้าถึง
• จำกัดสำหรับการออกแบบที่ตอบสนอง

คู่มือเชิงลึกหน่วย rem

📐 คุณสมบัติ

• อิงตามขนาดฟอนต์ของ 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 */