วิธีใช้งาน
- ตั้งค่าขนาดฟอนต์ root หากเว็บของคุณเปลี่ยนค่า (เช่น html { font-size: 62.5% } จะทำให้เป็น 10px)
- พิมพ์ค่าในช่องใดก็ได้เพื่อแปลง px เป็น rem หรือ rem เป็น px สลับเป็น em หากคุณกำหนดขนาดสัมพันธ์กับอิลิเมนต์แม่
- ใช้ตารางเพื่อดูค่าอย่างรวดเร็ว หรือวางโค้ด CSS เพื่อแปลงความยาว px ทุกค่าพร้อมกันและคัดลอกผลลัพธ์
วิธีการทำงาน
rem = px ÷ ขนาดฟอนต์ราก ด้วยขนาดรากค่าเริ่มต้น 16px ค่า 24px จึงเป็น 1.5rem และ 14px เป็น 0.875rem em ใช้สูตรเดียวกันแต่ใช้ขนาดฟอนต์ขององค์ประกอบแม่ ซึ่งเป็นสาเหตุที่ค่า em แบบซ้อนกันทวีคูณขึ้นเรื่อย ๆ rem ช่วยหลีกเลี่ยงปัญหานี้เพราะอ้างอิงกับรากเสมอ
การใช้ rem สำหรับขนาดฟอนต์และระยะห่างช่วยให้ข้อความปรับขนาดได้เมื่อมีคนเพิ่มขนาดฟอนต์เริ่มต้นในการตั้งค่าเบราว์เซอร์ ซึ่งช่วยผู้ที่มีสายตาเลือนราง ค่าจะถูกปัดเป็นทศนิยม 4 ตำแหน่ง
ตัวแปลงสไนปเป็ตจะเปลี่ยนตัวเลขที่ตามด้วย px โดยจะไม่แตะคอมเมนต์ url(…) และสตริงที่อยู่ในเครื่องหมายคำพูด คงค่า 1px ไว้ถ้าคุณเลือก (เส้นขอบบาง ๆ มักควรคงไว้ที่ 1px) เขียน 0px เป็น 0 และโดยค่าเริ่มต้นจะปล่อยเงื่อนไข @media และ @container ไว้โดยไม่แก้ไข เนื่องจากใน media queries rem และ em จะอ้างอิงขนาดฟอนต์เริ่มต้นของเบราว์เซอร์เสมอ ไม่ว่าคุณจะตั้งขนาดฟอนต์รากไว้เท่าใด เครื่องมือนี้ไม่เข้าใจความหมายของ calc() นอกเหนือจากการแทนที่ตัวเลข px ภายใน ซึ่งยังคงถูกต้องเพราะความยาวแต่ละค่าถูกแปลงแยกกัน
ตัวอย่าง
ขนาดรากค่าเริ่มต้น
เมื่อขนาดรากเป็น 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px
เทคนิค 62.5%
ถ้า CSS ของคุณกำหนด html { font-size: 62.5% } ขนาดรากจะเป็น 10px ดังนั้น 14px = 1.4rem และ 24px = 2.4rem ตั้งค่าช่องขนาดฟอนต์รากเป็น 10 เพื่อให้ตรงกัน
การแปลงคอมโพเนนต์
padding: 24px 16px; border: 1px solid #ddd; จะกลายเป็น padding: 1.5rem 1rem; border: 1px solid #ddd; เมื่อเปิด “คงค่า 1px ไว้”
คำถามที่พบบ่อย
ควรใช้ rem หรือ em?
ใช้ rem สำหรับขนาดฟอนต์ ระยะห่าง และเลย์เอาต์เป็นส่วนใหญ่ เนื่องจากให้ผลลัพธ์ที่คาดเดาได้ในทุกที่ ใช้ em เมื่อต้องการให้สิ่งนั้นปรับขนาดตามขนาดข้อความของคอมโพเนนต์ตัวเอง เช่น padding ภายในปุ่ม
ทำไมไม่แปลง media queries เป็น rem?
ทำได้ แต่ใน media query ค่า 1rem จะเท่ากับขนาดฟอนต์เริ่มต้นของเบราว์เซอร์เสมอ (ปกติคือ 16px) ไม่ใช่ html font-size ของคุณ เครื่องมือจึงข้ามค่าเหล่านี้ไว้เป็นค่าเริ่มต้น หากต้องการให้หารด้วย 16 อยู่ดี ให้ปิดตัวเลือกนี้
rem ดีกว่า px ในแง่การเข้าถึงหรือไม่
สำหรับขนาดฟอนต์ ใช่: rem จะยึดตามการตั้งค่าขนาดฟอนต์เริ่มต้นของผู้ใช้ ในขณะที่ขนาดฟอนต์แบบ px จะไม่สนใจค่านั้น การซูมเบราว์เซอร์ใช้ได้กับทั้งสองหน่วย
ความเป็นส่วนตัว
การแปลงและโค้ด CSS ถูกประมวลผลในเบราว์เซอร์ของคุณและไม่ถูกส่งไปที่ใด