ข้ามไปยังเนื้อหา
🛠️
Whiz Tools

เครื่องมือแปลงหน่วย PX เป็น REM เป็น EM – เครื่องคำนวณหน่วย CSS ฟรี

แปลงพิกเซลเป็นหน่วย REM และ EM ได้ทันที เครื่องมือแปลงหน่วย CSS สำหรับการออกแบบเว็บแบบ Responsive ที่รองรับขนาดฟอนต์แบบกำหนดเองและคำนวณแบบเรียลไทม์เพื่อผลลัพธ์ที่แม่นยำ

เครื่องมือแปลงหน่วย PX, REM และ EM

แปลงระหว่างหน่วยพิกเซล (PX), รูท เอ็ม (REM) และ เอ็ม (EM) ป้อนค่าในช่องใดก็ได้เพื่อดูค่าเทียบเคียงในหน่วยอื่น

px
px
px
rem
em
ไม่สามารถแสดงภาพสำหรับค่าติดลบหรือศูนย์

สูตรการแปลง

  • PX เป็น REM: ค่าใน px ÷ ขนาดฟอนต์หลัก
  • PX เป็น EM: ค่าใน px ÷ ขนาดฟอนต์องค์ประกอบหลัก
  • REM เป็น PX: ค่าใน rem × ขนาดฟอนต์หลัก
  • EM เป็น PX: ค่าใน em × ขนาดฟอนต์องค์ประกอบหลัก
เครื่องคำนวณโหลด...
📚

เอกสารประกอบการใช้งาน

เครื่องมือแปลงหน่วย PX, REM และ EM

เครื่องมือแปลง px เป็น rem และ em ใช้เปลี่ยนค่าความยาวใน CSS ระหว่างพิกเซล (px), root em (rem) และ em โดยใช้ขนาดฟอนต์ของรากและขนาดฟอนต์ขององค์ประกอบแม่ที่ผู้ใช้กำหนด หน่วยทั้งสามเป็นวิธีที่ใช้กันมากที่สุดในการกำหนดขนาดข้อความและระยะห่างใน CSS ซึ่งเป็นภาษาที่ใช้กำหนดรูปแบบหน้าเว็บ

px, rem และ em คืออะไร?

พิกเซล (px) เป็นหน่วยคงที่ กล่องที่กำหนดให้มีความกว้าง 200px จะยังคงกว้าง 200px ไม่ว่าหน้าเว็บจะใช้ขนาดฟอนต์เท่าใด

rem ("root em") เป็นหน่วยที่ปรับตามขนาดฟอนต์ขององค์ประกอบรากของหน้าเว็บ ซึ่งโดยปกติคือแท็ก <html> เบราว์เซอร์ส่วนใหญ่กำหนดขนาดฟอนต์ของรากไว้ที่ 16px เว้นแต่เว็บไซต์จะเปลี่ยนค่า หากขนาดฟอนต์ของรากคือ 16px ดังนั้น 1rem จะเท่ากับ 16px

em เป็นหน่วยที่ปรับตามขนาดฟอนต์ขององค์ประกอบ แม่ ซึ่งเป็นองค์ประกอบที่ครอบองค์ประกอบนั้นไว้ หากองค์ประกอบแม่มีค่า font-size: 20px ดังนั้น 1em ภายในองค์ประกอบแม่นั้นจะเท่ากับ 20px

ความแตกต่างหลักระหว่าง rem กับ em คือสิ่งที่แต่ละหน่วยใช้เป็นเกณฑ์ Rem จะดูที่องค์ประกอบรากเสมอ ส่วน em จะดูที่องค์ประกอบแม่ที่อยู่ใกล้ที่สุด ดังนั้นค่าของ em จึงเปลี่ยนได้ในแต่ละระดับของการซ้อนองค์ประกอบ

วิธีคำนวณ px เป็น rem

หากต้องการแปลงพิกเซลเป็น rem ให้หารค่าพิกเซลด้วยขนาดฟอนต์ของราก:

r=pRr = \frac{p}{R}

โดย r คือความยาวในหน่วย rem, p คือความยาวในหน่วยพิกเซล และ R คือขนาดฟอนต์ของรากในหน่วยพิกเซล

ตัวอย่างพร้อมวิธีทำ

เมื่อใช้ขนาดฟอนต์ของรากเริ่มต้นที่ 16px ค่า 24px จะแปลงได้เป็น:

24 ÷ 16 = 1.5rem

หากเว็บไซต์กำหนดขนาดฟอนต์ของรากเป็น 10px (เทคนิคที่ใช้กันทั่วไป โดยกำหนด html { font-size: 62.5%; } เนื่องจาก 62.5% ของ 16px เท่ากับ 10px) ค่า 24px เดิมจะกลายเป็น:

24 ÷ 10 = 2.4rem

วิธีคำนวณ rem เป็น px

หากต้องการแปลงกลับ ให้คูณค่า rem ด้วยขนาดฟอนต์ของราก:

p=r×Rp = r \times R

โดย p คือความยาวในหน่วยพิกเซล, r คือความยาวในหน่วย rem และ R คือขนาดฟอนต์ของราก

เมื่อขนาดฟอนต์ของรากเป็น 16px ค่า 1.5rem จะแปลงกลับเป็น 1.5 × 16 = 24px

วิธีคำนวณ px เป็น em

หากต้องการแปลงพิกเซลเป็น em ให้หารค่าพิกเซลด้วยขนาดฟอนต์ขององค์ประกอบแม่:

e=pPe = \frac{p}{P}

โดย e คือความยาวในหน่วย em และ P คือขนาดฟอนต์ขององค์ประกอบแม่ในหน่วยพิกเซล

ตัวอย่างพร้อมวิธีทำ

หากขนาดฟอนต์ขององค์ประกอบแม่คือ 20px ค่า 24px จะแปลงได้เป็น:

24 ÷ 20 = 1.2em

วิธีคำนวณ em เป็น px

ให้คูณค่า em ด้วยขนาดฟอนต์ขององค์ประกอบแม่:

p=e×Pp = e \times P

โดย p คือความยาวในหน่วยพิกเซล, e คือความยาวในหน่วย em และ P คือขนาดฟอนต์ขององค์ประกอบแม่

เมื่อขนาดฟอนต์ขององค์ประกอบแม่เป็น 20px ค่า 1.2em จะแปลงกลับเป็น 1.2 × 20 = 24px

วิธีคำนวณ rem เป็น em และ em เป็น rem

เนื่องจาก rem และ em ใช้ขนาดฟอนต์ที่แตกต่างกันเป็นเกณฑ์ การแปลงระหว่างหน่วยทั้งสองจึงต้องใช้ทั้งขนาดฟอนต์ของรากและขนาดฟอนต์ขององค์ประกอบแม่:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

โดย R คือขนาดฟอนต์ของราก และ P คือขนาดฟอนต์ขององค์ประกอบแม่

ตัวอย่างพร้อมวิธีทำ

เมื่อขนาดฟอนต์ของรากเป็น 16px และขนาดฟอนต์ขององค์ประกอบแม่เป็น 20px ค่า 2rem จะแปลงได้เป็น:

2 × (16 ÷ 20) = 1.6em

หากขนาดฟอนต์ของรากและองค์ประกอบแม่เท่ากัน 1rem จะเท่ากับ 1em เสมอ

แต่ละหน่วยเหมาะกับการใช้งานเมื่อใด

พิกเซลเหมาะกับรายละเอียดที่ไม่ควรเปลี่ยนขนาด เช่น เส้นขอบขนาด 1px หรือไอคอนที่มีความกว้างคงที่

Rem นิยมใช้กับระยะห่างและตัวอักษรที่ควรคงความสม่ำเสมอทั่วทั้งหน้า เนื่องจาก rem อ้างอิงขนาดฟอนต์ของรากเสมอ ค่า rem จึงไม่เปลี่ยนไม่ว่าองค์ประกอบจะซ้อนอยู่ลึกเพียงใด นอกจากนี้ การจัดวางโดยใช้ rem ยังปรับโดยอัตโนมัติเมื่อผู้ใช้เพิ่มขนาดฟอนต์เริ่มต้นของเบราว์เซอร์ ซึ่งช่วยผู้อ่านที่มีการมองเห็นเลือนราง

Em เหมาะกับการใช้ภายในคอมโพเนนต์เดี่ยวที่แยกเป็นอิสระ เช่น ปุ่ม ซึ่งควรให้ระยะขอบภายในปรับตามขนาดฟอนต์ของปุ่มนั้น ปัญหาที่พบบ่อยของ em คือค่าจะทบกันสะสม: หากองค์ประกอบที่ซ้อนกันหลายชั้นใช้ font-size: 1.2em ในแต่ละชั้น แต่ละระดับจะคูณค่าของระดับก่อนหน้า ทำให้ขนาดฟอนต์เพิ่มเร็วกว่าที่ตั้งใจ

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

หลังจากซ้อนกันสามระดับ ข้อความจะมีขนาดเพิ่มขึ้นประมาณ 73% ไม่ใช่ 20% ที่นักพัฒนาอาจคาดจากกฎ 1.2em เพียงกฎเดียว

วิธีใช้เครื่องมือแปลง

  1. ป้อนค่าลงในช่องพิกเซล rem หรือ em
  2. ช่องอีกสองช่องจะอัปเดตโดยอัตโนมัติ โดยปัดเศษเป็นทศนิยมสี่ตำแหน่ง
  3. ตั้งขนาดฟอนต์ของรากให้ตรงกับองค์ประกอบ <html> ของโปรเจกต์ โดยค่าเริ่มต้นในเบราว์เซอร์ส่วนใหญ่คือ 16px และมีผลเฉพาะกับ rem
  4. ตั้งขนาดฟอนต์ขององค์ประกอบแม่ให้ตรงกับขนาดฟอนต์ขององค์ประกอบที่ค่ em จะอยู่ภายใน โดยมีผลเฉพาะกับ em
  5. ใช้ปุ่มคัดลอกถัดจากช่องเพื่อคัดลอกค่า

ช่องขนาดฟอนต์ทั้งสองช่องรับค่าพิกเซลเป็นจำนวนเต็ม และค่าต่ำสุดที่อนุญาตคือ 1px ปุ่มรีเซ็ตจะล้างค่าและตั้งขนาดฟอนต์ทั้งสองกลับเป็น 16px

ใต้ช่อง เครื่องมือจะแสดงแถบหนึ่งแถบต่อหนึ่งหน่วย แถบทั้งสามแทน ความยาวจริงเดียวกัน ดังนั้นจึงมีความกว้างเท่ากัน ซึ่งเป็นวิธีตรวจสอบอย่างรวดเร็วว่า การแปลงถูกต้อง แถบจะแสดงตามความยาวพิกเซลจริงจนถึง 300px ส่วนค่าที่มากกว่านั้น จะถูกย่อให้พอดี ดังนั้นค่าขนาด 600px และ 900px จะแสดงจนถึง 300px เท่ากัน แถบ จะแสดงเฉพาะเมื่อค่าพิกเซลมากกว่าศูนย์

คำถามที่พบบ่อย

rem กับ em แตกต่างกันอย่างไร Rem อ้างอิงขนาดฟอนต์ขององค์ประกอบรากเสมอ ส่วน em อ้างอิงขนาดฟอนต์ขององค์ประกอบแม่ที่อยู่ใกล้ที่สุด ค่า rem จะคงเดิมทั่วทั้งหน้า แต่ค่า em อาจเปลี่ยนไปตามความลึกของการซ้อนองค์ประกอบ

เหตุใดเบราว์เซอร์จึงใช้ 16px เป็นขนาดฟอนต์เริ่มต้น 16px เป็นขนาดข้อความเริ่มต้นในเบราว์เซอร์หลักมาเป็นเวลานาน เพราะอ่านได้สบายบนหน้าจอทั่วไปโดยไม่ต้องใช้การกำหนดรูปแบบเพิ่มเติม แนวทางด้านการเข้าถึงเว็บแนะนำว่าควรปรับขนาดข้อความได้ถึง 200% โดยไม่ทำให้การจัดวางหน้าเว็บเสียหาย และ 16px เป็นจุดเริ่มต้นที่เหมาะสมสำหรับการปรับดังกล่าว

เทคนิค 62.5% คืออะไร การกำหนด html { font-size: 62.5%; } จะเปลี่ยนขนาดฟอนต์รากเริ่มต้นจาก 16px เป็น 10px เนื่องจาก 62.5% ของ 16 เท่ากับ 10 วิธีนี้ทำให้คำนวณ rem ได้ง่ายขึ้น เพราะ 1.6rem เท่ากับ 16px และ 2.4rem เท่ากับ 24px

ค่า px, rem และ em เป็นลบได้หรือไม่ ได้ สำหรับคุณสมบัติที่รองรับค่าความยาวติดลบ เช่น ระยะขอบหรือการแปลง CSS แต่ระยะขอบภายในไม่สามารถเป็นค่าลบใน CSS ได้ เบราว์เซอร์จะไม่สนใจค่าระยะขอบภายในติดลบ เครื่องมือแปลงรองรับค่าติดลบ แต่จะไม่วาดแถบสำหรับค่าเหล่านั้น เพราะแถบไม่สามารถมีความกว้างติดลบได้

ควรแปลงค่าพิกเซลทุกค่าเป็น rem หรือไม่ ไม่จำเป็น เส้นขอบและรายละเอียดขนาดเล็กอื่น ๆ มักคงไว้เป็นพิกเซล เนื่องจากแทบไม่จำเป็นต้องปรับตามขนาดฟอนต์ และอาจดูไม่สม่ำเสมอเมื่อใช้ความกว้างที่เล็กกว่าหนึ่งพิกเซล ส่วน rem เหมาะกับระยะห่างและตัวอักษรที่ควรปรับตามการตั้งค่าขนาดฟอนต์ของผู้ใช้

การเลือกหน่วยมีผลต่อประสิทธิภาพของหน้าเว็บหรือไม่ ไม่มี เบราว์เซอร์จะแปลงค่าความยาว CSS ทุกหน่วยเป็นค่าเดียวกันภายในระหว่างจัดวาง ดังนั้น px, rem และ em จึงแสดงผลได้เร็วเท่ากัน การเลือกใช้หน่วยใดมีผลต่อการดูแลรักษาโค้ดและการเข้าถึงเว็บ ไม่ใช่ความเร็ว