เครื่องมือแปลงหน่วย px เป็น rem และ em
แปลงหน่วยสลับไปมาระหว่าง px, rem และ em โดยใช้ขนาดตัวอักษรรูทและบริบทของคุณเอง — แก้ไขช่องใดก็ได้ อีกสองช่องจะอัปเดตตามทันทีขณะพิมพ์
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 40 | 2.5 |
| 48 | 3 |
ทุกการแปลงค่าจะทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลที่คุณกรอกไปยัง BroBroGo
คำถามที่พบบ่อย
px, rem และ em แตกต่างกันอย่างไร?
px เป็นหน่วยความยาวคงที่ ส่วน rem จะวัดเทียบกับขนาดตัวอักษรรูทของหน้าเว็บ ดังนั้นที่ขนาดรูท 16px ค่า 1rem จะเท่ากับ 16px สำหรับ em จะวัดเทียบกับขนาดตัวอักษรขององค์ประกอบที่มันอยู่ การกำหนดขนาดตัวอักษรและระยะห่างเป็นหน่วย rem จะช่วยให้ทุกอย่างสามารถปรับขนาดตามได้อย่างเหมาะสมเมื่อผู้อ่านเปลี่ยนขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์
ทำไมจึงต้องมีขนาดบริบท em แยกต่างหาก?
หน่วย em จะเทียบกับขนาดตัวอักษรขององค์ประกอบของตัวเอง ซึ่งไม่จำเป็นต้องเป็นขนาดรูทเสมอไป ให้ตั้งค่าบริบท em (em context) เป็นขนาดตัวอักษรขององค์ประกอบนั้นเพื่อให้คำนวณค่า em ได้อย่างถูกต้อง และคงค่าให้เท่ากับรูทเมื่อทั้งสองส่วนมีขนาดเท่ากัน
หากขนาดตัวอักษรรูทของฉันไม่ใช่ 16px ต้องทำอย่างไร?
เพียงเปลี่ยนค่าในช่องขนาดตัวอักษรรูท (Root font size) ให้ตรงกับ CSS ของคุณ แล้วค่า rem ทั้งหมดจะอัปเดตทันที ตารางเปรียบเทียบด่วนด้านล่างนี้เป็นแนวทางที่เป็นประโยชน์สำหรับขนาดรูทมาตรฐาน 16px ซึ่งเป็นค่าเริ่มต้นที่เว็บไซต์ส่วนใหญ่ใช้งาน