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

หน่วย rem ช่วยให้เลย์เอาต์เข้าถึงได้ — มันปรับขนาดตามค่ากำหนดขนาดฟอนต์ของผู้ใช้ — แต่ไม่มีใครอยากหารด้วย 16 ในใจทั้งวัน ตัวแปลงนี้คิดเลขให้แบบสด ๆ: เลือกทิศทาง (px → rem, rem → px หรือ px → em) พิมพ์ค่า แล้วผลลัพธ์ก็ปรากฏทันทีพร้อมกับบรรทัด CSS ที่คัดลอกได้ เช่น font-size: 0.875rem

ช่องขนาดฟอนต์ฐานทำให้เครื่องมือนี้ใช้ได้กับทุกโปรเจกต์ ค่าเริ่มต้นของเบราว์เซอร์คือ 16px ดังนั้น 1rem จึงเท่ากับ 16px ตั้งแต่เริ่ม แต่โค้ดเบสจำนวนมากตั้งค่า html { font-size: 62.5% } เพื่อให้ 1rem เท่ากับ 10px — ใส่ 10 เป็นฐาน แล้วทุกการแปลงและทุกแถวของตารางก็จะเปลี่ยนตาม ทิศทาง px → em ใช้คณิตศาสตร์แบบเดียวกันแต่เทียบกับขนาดฟอนต์ของอีลิเมนต์แม่แทนที่จะเป็นรูท ซึ่งนั่นก็คือข้อแตกต่างระหว่าง em และ rem ใน CSS นั่นเอง

ใต้ผลลัพธ์ ตารางอ้างอิงจะแสดงขนาดที่ใช้กันบ่อยในงานดีไซน์ — 1, 2, 4, 8, 10, 12, 14, 16, 18, 20, 24, 32, 48 และ 64 พิกเซล — ที่แปลงแล้วที่ฐานปัจจุบันของคุณ โดยเน้นแถวที่ตรงกับฐาน มันคือชีทโกงที่คุณอาจเคยแปะไว้หน้าจอ ซึ่งตรงกับฐานที่คุณใช้จริงเสมอ

ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณขณะที่พิมพ์: ไม่มีการอัปโหลด, ไม่ต้องสมัคร, ไม่ต้องเดินทางไปมาเซิร์ฟเวอร์ หน้าเพจที่ตั้งค่าล่วงหน้าสำหรับ rem → px, px → em, ฐาน 10px และค่ายอดนิยมอย่าง 14, 24 และ 32 px จะเปิดตัวแปลงที่ตั้งค่าพร้อมสำหรับคำถามเหล่านั้น