ใช้ทำอะไร
เครื่องมือนี้แปลงความยาวใน CSS ระหว่างพิกเซลกับหน่วยสัมพัทธ์ rem และ em พิมพ์ค่าเดียวอย่าง 24px เพื่อได้ 1.5rem ใส่หลายค่าบรรทัดละค่าเพื่อแปลงพร้อมกัน หรือวางสไตล์ชีตทั้งไฟล์แล้วค่า px ทุกค่าจะถูกเขียนใหม่ในที่เดิม ตารางอ้างอิงแสดงขนาดที่ใช้บ่อยตั้งแต่ 1px ถึง 128px ตามขนาดฐานของคุณ ไม่มีข้อมูลใดออกจากเบราว์เซอร์
วิธีใช้
- วาง CSS หรือพิมพ์ค่าบรรทัดละหนึ่งค่า ตัวเลขที่ไม่มีหน่วยจะถือเป็น px (หรือ rem/em เมื่อกลับทิศทาง) และค่าที่เขียนด้วยอีกหน่วยจะถูกแปลงในทิศตรงข้าม
- ตั้ง ขนาดฟอนต์ฐาน เบราว์เซอร์ทุกตัวใช้ 16px เป็นค่าเริ่มต้น บางโปรเจกต์ใช้
html { font-size: 62.5% }เพื่อให้ 1rem = 10px - เลือก ทิศทาง (px → rem หรือ rem → px) หน่วย (rem หรือ em) และจำนวน ทศนิยม ที่ต้องการ
- หากต้องการ ตั้ง คงเป็น px ถ้าน้อยกว่า เพื่อให้เส้นขอบ 1px และเส้นบางอื่น ๆ ยังเป็น px
- คัดลอกผลลัพธ์ด้วยปุ่มด้านบน
ตัวอย่าง
/* before */
.title { font-size: 24px; margin-bottom: 12px; }
/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }ค่าที่ไม่ใช่ px เช่น เปอร์เซ็นต์ สี ชื่อไฟล์ใน url() และชื่อคลาสอย่าง .mt-16px จะไม่ถูกแก้ไข 0px จะกลายเป็น 0
px, rem และ em
- px เป็นหน่วยสัมบูรณ์ ไม่สนใจขนาดฟอนต์ที่ผู้อ่านตั้งไว้
- rem (“root em”) คือผลคูณของขนาดฟอนต์ขององค์ประกอบ
htmlถ้าผู้อ่านตั้งเบราว์เซอร์เป็น 20px แล้ว 1rem จะเท่ากับ 20px และทั้งเลย์เอาต์จะย่อขยายตาม - em คือผลคูณของขนาดฟอนต์ขององค์ประกอบปัจจุบัน เหมาะกับระยะห่างที่ต้องตามตัวอักษรของมัน แต่ em ที่ซ้อนกันจะคูณกัน rem จึงเป็นค่าเริ่มต้นที่ปลอดภัยกว่า
Media query ก็ถูกแปลงด้วย @media (min-width: 768px) จะกลายเป็น 48rem (หรือ 48em) ทำให้ breakpoint สอดคล้องกันเมื่อผู้อ่านขยายตัวอักษร ใน media query ทั้ง rem และ em อ้างอิงขนาดฟอนต์เริ่มต้นของเบราว์เซอร์ ไม่ใช่กฎ html ของคุณ
คำถามที่พบบ่อย
› แปลง px เป็น rem อย่างไร?
นำค่าพิกเซลไปหารด้วยขนาดฟอนต์ของ root ถ้าใช้ค่าเริ่มต้นของเบราว์เซอร์ 16px จะได้ 24px ÷ 16 = 1.5rem และ 12px ÷ 16 = 0.75rem ถ้าจะแปลงกลับให้คูณ: 2rem × 16 = 32px
› rem กับ em ต่างกันอย่างไร?
rem อ้างอิงขนาดฟอนต์ขององค์ประกอบ root คือ html ดังนั้น 1rem มีขนาดเท่ากันทั้งหน้า ส่วน em อ้างอิงขนาดฟอนต์ขององค์ประกอบปัจจุบัน (หรือของพาเรนต์เมื่อเป็น font-size เอง) จึงคูณซ้อนกันเมื่อองค์ประกอบซ้อนกัน ใช้ rem กับขนาดส่วนใหญ่ และใช้ em เมื่อต้องการให้ย่อขยายตามตัวอักษรของตัวเอง เช่น padding ของปุ่ม
› ทำไมควรใช้ rem แทน px?
เมื่อผู้อ่านเพิ่มขนาดฟอนต์เริ่มต้นในการตั้งค่าเบราว์เซอร์ ขนาดที่เป็น rem จะใหญ่ขึ้นตาม แต่ px จะคงที่ rem ช่วยให้เลย์เอาต์เข้าถึงได้ง่ายและย่อขยายทั้งดีไซน์ได้ด้วยการเปลี่ยนค่า root เพียงค่าเดียว
› ควรแปลงเส้นขอบ 1px ไหม?
โดยทั่วไปไม่ควร เส้นบาง 0.0625rem อาจเบลอหรือหายไปในบางระดับการซูม ตั้ง “คงเป็น px ถ้าน้อยกว่า” เป็น 2px แล้วตัวแปลงจะคงเส้นขอบและค่าเล็ก ๆ อื่นไว้เป็น px