สูตร
1rem = root px · 1em = element px · 1pt = 96/72 px
ปรับหน่วยต้นทางให้เป็นพิกเซลอ้างอิง CSS จากนั้นหารด้วยปัจจัยพิกเซลตามบริบทของหน่วยเป้าหมาย
รูปภาพและหน้าจอ
● ทำงานในพื้นที่ตัวแปลงหน่วย CSS
แปลงความยาว CSS ทั่วไปเมื่อบริบทที่ต้องการมีความชัดเจนเท่านั้น ระบุขนาดฟอนต์ขององค์ประกอบรูทและองค์ประกอบปัจจุบัน ดังนั้น rem และ em จะไม่ถือเป็นพื้นฐานเดียวกัน
ค่าตัวอย่าง
ความยาว CSS ที่แปลงแล้ว
สมมติฐาน
- ขนาดแบบอักษรของรูทและองค์ประกอบนั้นเป็นค่าบวกอย่างเคร่งครัด
- พิกเซลอ้างอิง CSS ถูกใช้แทนพิกเซลหน้าจอจริงที่วัดได้
เครื่องมือนี้ถือว่าความสัมพันธ์อ้างอิง CSS 1in = 96px และ 1pt = 1/72in ไม่รวมหน่วยวิวพอร์ตและเปอร์เซ็นต์
รีวิวสูตร
Formula v1.0.0
ตรวจสอบแล้ว 2026-08-03
CalcFlow engineering review
ตัวแปลงหน่วย CSS: ตัวอย่างการทำงาน
ที่รูท 16 px, 24 px ÷ 16 = 1.5 rem ภายใต้กฎพิกเซลอ้างอิง 24 พิกเซลก็เท่ากับ 18 พอยต์ด้วย
คำถามที่พบบ่อย
ความแตกต่างระหว่าง rem และ em คืออะไร?
rem ใช้ขนาดตัวอักษรขององค์ประกอบรูท em ใช้บริบทขนาดตัวอักษรขององค์ประกอบปัจจุบัน
เหตุใดเปอร์เซ็นต์จึงถูกยกเว้น?
เปอร์เซ็นต์อาจขึ้นอยู่กับคุณสมบัติที่แตกต่างกันและบล็อกที่มี ดังนั้นบริบทสเกลาร์เดียวจึงไม่เพียงพอ
CSS px เป็นพิกเซลจริงหรือไม่
ไม่จำเป็น. CSS กำหนดพิกเซลอ้างอิงที่เบราว์เซอร์จับคู่กับพิกเซลของอุปกรณ์ตามการแสดงผลและการซูม