ตัวแปลง PX เป็น REM

REM (root em) จะอ้างอิงกับขนาดตัวอักษรของ root element (html) เสมอ — ทำให้มีความสม่ำเสมอและคาดเดาได้ทั่วทั้งหน้า ส่วน EM จะอ้างอิงกับ element แม่ ซึ่งหมายความว่ามันจะทับถมกัน: หาก parent คือ 1.2em และ child ก็คือ 1.2em ตัวลูกจะกลายเป็น 1.44 เท่าของขนาด root ให้ใช้ REM สำหรับขนาดตัวอักษรและระยะห่างที่สม่ำเสมอ และใช้ EM เมื่อคุณต้องการการย่อ/ขยายตามขนาดตัวอักษรของคอมโพเนนต์เองโดยเฉพาะ (เช่น padding ของปุ่ม)

REM จะเคารพการตั้งค่าขนาดตัวอักษรของผู้ใช้ในเบราว์เซอร์ หากผู้ใช้ตั้งค่าพื้นฐานของเบราว์เซอร์เป็น 20px เพื่อความสะดวกในการเข้าถึง (accessibility) ค่า 1rem จะกลายเป็น 20px และเลย์เอาต์ของคุณจะปรับขนาดตามสัดส่วน ส่วนค่า PX จะคงที่และไม่สนใจการตั้งค่านี้ การใช้ REM ทำให้ไซต์ของคุณเข้าถึงได้ง่ายขึ้นและขยายขนาดได้ง่ายขึ้นด้วยการเปลี่ยน root font-size เพียงครั้งเดียว

PT (points) เป็นหน่วยสำหรับการพิมพ์: 1pt = 1/72 นิ้ว สำหรับเว็บ 12pt = 16px ที่ความละเอียดหน้าจอมาตรฐาน PT นานๆ ครั้งจะถูกใช้ใน print stylesheets (@media print) แต่แทบไม่ใช้ใน CSS ของเว็บทั่วไป ให้ใช้ PX, REM หรือ EM สำหรับเลย์เอาต์บนหน้าจอ

ใส่ค่า PX หลายค่าโดยพิมพ์ทีละบรรทัดในช่อง Bulk Converter แล้วคลิก Convert คุณจะได้รับค่าที่เทียบเท่าของ REM, EM และ PT สำหรับแต่ละค่าในตารางเดียว มีประโยชน์มากเมื่อต้องย้ายระบบการออกแบบ (design system) หรือแปลง stylesheet ที่มีอยู่เดิมจาก PX เป็น REM พร้อมกันทั้งหมด

ส่วนของ CSS Variables จะสร้างคำประกาศ CSS custom property จากผลการแปลงแบบกลุ่มของคุณ พร้อมนำไปวางใช้งานได้ทันที ตัวอย่างเช่น: --font-sm: 0.875rem; --font-base: 1rem; --font-lg: 1.25rem คุณสามารถนำเหล่านี้ไปวางในบล็อก :root {} ได้โดยตรง

ใช้ขนาดตัวอักษรที่คุณตั้งค่าไว้ใน html element ใน CSS ของคุณ หากคุณยังไม่ได้ตั้งค่าอะไรเลย มันจะใช้ค่าเริ่มต้นของเบราว์เซอร์ (16px) นักพัฒนาบางคนตั้งค่า html { font-size: 62.5% } เพื่อให้ 1rem = 10px สำหรับการคำนวณในใจที่ง่ายขึ้น (เช่น 24px = 2.4rem) ให้เปลี่ยนค่าอินพุตพื้นฐานเพื่อให้ตรงกับ root font size จริงของโปรเจกต์คุณ

ไม่ การแปลงทั้งหมดถูกคำนวณภายในเบราว์เซอร์ของคุณด้วย JavaScript ไม่มีอะไรถูกส่งต่อหรือจัดเก็บ คุณสามารถใช้งานแบบออฟไลน์ได้หลังจากหน้าเว็บโหลดเสร็จแล้ว