พิกเซลเป็น rem
แปลงค่าพิกเซลเป็น rem สำหรับเลย์เอาต์ CSS สมัยใหม่ rem ปรับตามขนาดฟอนต์รากของผู้ใช้ — ดีกว่า px คงที่สำหรับการเข้าถึง
วิธีแปลง px เป็น rem
1. ใส่ค่าพิกเซลจากดีไซน์ (เช่น 32 px)
2. ตั้งขนาดฟอนต์ราก (ค่าเริ่มต้น 16 px หากไม่เปลี่ยน)
3. คัดลอกผล rem เข้าสไตล์ชีต
4. ใช้ rem สำหรับขนาดฟอนต์ ระยะห่าง และสเกลคอมโพเนนต์ px สำหรับขอบบางหากจำเป็น
ตัวอย่าง px เป็น rem
ตัวอักษรเนื้อหาและพาดหัว
16 px = 1 rem (ค่าเริ่มต้น) 24 px = พาดหัว 1.5 rem 14 px = ข้อความเล็ก 0.875 rem
รากกำหนดเอง 10 px (ระบบดีไซน์)
บางทีมตั้ง html { font-size: 62.5% } เพื่อให้ 1 rem = 10 px จากนั้นโทเค็นดีไซน์ 32 px = 3.2 rem
สเกลระยะห่าง
กริด 8 px → 0.5 rem ที่ราก 16 px แพดดิง 16 px = 1 rem จังหวะสม่ำเสมอในสเกลแบบ Tailwind
เมื่อไหร่ควรแปลง px เป็น rem
• เมื่อลงสเปก Figma ใน CSS ตอบสนองพร้อมซูมที่เข้าถึงได้
• เมื่อจัดกับโทเค็นระบบดีไซน์ที่นิยามเป็น rem
• เมื่อผู้ใช้แทนที่ขนาดฟอนต์เริ่มต้นของเบราว์เซอร์ — เลย์เอาต์ rem ปรับตาม
rem กับ em ใน CSS ของคอมโพเนนต์
em สะสมในองค์ประกอบซ้อนที่มีขนาดฟอนต์ต่างกัน — แพดดิงเป็น em โตตามข้อความท้องถิ่น rem ผูกกับราก ให้ระยะห่างที่คาดเดาได้ข้ามคอมโพเนนต์ หลายทีมใช้ rem สำหรับสเกลเลย์เอาต์ และ em เฉพาะสำหรับ letter-spacing หรือการปรับจุลภาคที่ผูกกับตัวพิมพ์ท้องถิ่น
คำถามที่พบบ่อย
rem คืออะไร?
rem = "root em" 1 rem เท่ากับขนาดฟอนต์ขององค์ประกอบ html ไม่ใช่พาเรนต์
ทำไมไม่ใช้ px ทุกที่?
px คงที่ไม่สนใจค่ากำหนดฟอนต์ของผู้ใช้ rem เคารพการปรับรากสำหรับการเข้าถึง (WCAG)
ขนาดฟอนต์รากเริ่มต้น?
เบราว์เซอร์ส่วนใหญ่เริ่มต้นที่ 16 px บน html ผู้ใช้เปลี่ยนได้ในการตั้งค่า
สูตร?
rem = px ÷ rootFontSizePx ตัวอย่าง: 20 px ÷ 16 = 1.25 rem
rem ใช้กับมาร์จินและแพดดิงได้หรือไม่?
ได้ — rem ใช้กับพร็อพเพอร์ตี้ความยาว CSS ใดก็ได้ ไม่ใช่แค่ font-size