ตัวแปลง PX เป็น REM
ตัวแปลง pixel เป็น REM ออนไลน์ฟรี แปลง px เป็น rem ทันทีพร้อม root font-size ที่กำหนดเองได้, conversion table ครบถ้วน, ค่า Tailwind breakpoint (sm, md, lg,
Loading tool...
ตัวแปลง PX เป็น REM คืออะไร?
ตัวแปลง Pixel เป็น REM เป็นเครื่องมือบน browser ฟรีที่แปลงค่า CSS pixel เป็นหน่วย rem โดยนำค่า pixel หารด้วย root font-size (default 16px) เพื่อให้ได้ค่า rem ที่ถูกต้องทันที พร้อมแสดงสูตรที่ใช้ นอกจากตัวแปลงหลักแล้วยังมี conversion table ตั้งแต่ 1px ถึง 128px อ้างอิง Tailwind breakpoint ทั่วไป (sm, md, lg, xl, 2xl) ทั้ง px และ rem, ปุ่ม quick-convert และ copy ค่าใด ๆ ได้ในคลิกเดียวเป็น CSS พร้อมใช้ ทำงานฝั่ง client 100% ไม่มีข้อมูลส่งออกไปไหนและใช้งาน offline ได้
ประโยชน์หลัก
- แปลง live ทันทีขณะพิมพ์ พร้อมแสดงสูตรที่ใช้เพื่อความโปร่งใส
- กำหนด root font-size เองได้ ทำให้เครื่องมือรองรับ convention ของทุกโปรเจกต์ ไม่ใช่แค่ default 16px
- conversion table ครบถ้วนและอ้างอิง Tailwind breakpoint ช่วยลดการคำนวณด้วยมือ
- copy ค่า rem หรือตารางทั้งหมดเป็น TSV ได้ในคลิกเดียว พร้อมสำหรับ stylesheet หรือเอกสาร
- ทำงานฝั่ง client 100% ไม่ต้องสมัคร ไม่มีการติดตาม และใช้งาน offline ได้
กรณีการใช้งาน
- •แปลงดีไซน์จาก Figma หรือ Sketch (เป็น pixel) เป็น CSS แบบ rem ที่ responsive
- •สร้าง typography ที่เข้าถึงได้และปรับขนาดได้ด้วยหน่วย rem แทน pixel ตายตัว
- •เช็คค่า Tailwind breakpoint เป็น rem สำหรับ media query ได้รวดเร็ว
- •ตรวจสอบ codebase เดิมเพื่อเปลี่ยนค่า px เป็น rem เพื่อ responsiveness ที่ดีขึ้น
- •สอนหรือเรียนรู้หน่วยสัมพัทธ์ของ CSS และพฤติกรรมของ root font-size
วิธีแปลง Pixel เป็น REM
- ตั้งค่า Root Font-Size: กรอก root font-size (อิลิเมนต์ html) เป็น pixel ค่าเริ่มต้นคือ 16px หมายถึง 1rem = 16px ปรับเปลี่ยนได้หากโปรเจกต์ใช้ base อื่น เช่น 10px หรือ 20px
- กรอกค่า Pixel ของคุณ: พิมพ์ค่า pixel ที่ต้องการแปลงในช่อง Pixel (px) หรือคลิกปุ่ม quick-convert สำเร็จ (8, 12, 14, 16, 20, 24, 32, 40, 48, 64)
- ดูผลลัพธ์: ช่อง REM จะอัปเดตทันทีพร้อมค่าที่แปลงแล้วและสูตรที่ชัดเจน เช่น 32px ÷ 16px = 2rem ดูตารางเต็มและแถว breakpoint เพื่อหาขนาดอื่น ๆ
- Copy ค่า CSS: คลิกปุ่ม copy ข้างผลลัพธ์เพื่อ copy ค่าเป็น rem หรือใช้ Copy Table เพื่อ export conversion table ทั้งหมดเป็น TSV สำหรับ stylesheet หรือเอกสารของคุณ
คุณสมบัติหลัก
- แปลง px-to-rem ทันทีพร้อมคำนวณ live ขณะพิมพ์ — ไม่ต้องกดปุ่ม submit
- กำหนด root font-size เองได้เพื่อให้ตรงกับ convention ของทุกโปรเจกต์ (default 16px = 1rem)
- Conversion table ครบถ้วนตั้งแต่ 1px ถึง 128px พร้อมค่า rem ที่แม่นยำสำหรับทุกขนาดทั่วไป
- อ้างอิง Tailwind breakpoint ในตัว แสดง sm, md, lg, xl และ 2xl ทั้ง px และ rem
- Copy ค่าที่แปลงแล้วได้ในคลิกเดียวเป็น CSS พร้อมใช้ (เช่น font-size: 1rem)
- ทำงานฝั่ง client 100% และใช้งาน offline ได้ — ข้อมูลไม่ออกจาก browser ไม่ต้องสมัคร
คำถามที่พบบ่อย
จะแปลง pixel (px) เป็น rem อย่างไร?
นำค่า pixel หารด้วย root font-size เช่น root เป็น 16px จะได้ 32px ÷ 16 = 2rem สูตรคือ rem = px ÷ root-font-size เครื่องมือนี้คำนวณให้ทันทีและแสดงสูตรที่ใช้
ค่า root font-size เริ่มต้นสำหรับการแปลง px เป็น rem คือเท่าไร?
ค่า root font-size เริ่มต้นคือ 16px ซึ่งเป็นมาตรฐานใน browser สมัยใหม่เกือบทั้งหมด หมายความว่า 1rem เท่ากับ 16px คุณสามารถเปลี่ยน root font-size ในเครื่องมือนี้เพื่อให้ตรงกับ convention ของโปรเจกต์ เช่น 10px (จะได้ 1rem = 10px)
ทำไมควรใช้ rem แทน px ใน CSS?
rem (root em) เป็นหน่วยสัมพัทธ์กับ root font-size จึงปรับขนาดได้สม่ำเสมอเมื่อผู้ใช้เปลี่ยนการซูม browser หรือตั้งค่า font-size ทำให้ rem เหมาะกับการเข้าถึง (accessibility) และ responsive design มากกว่า เพราะเลย์เอาต์และตัวอักษรจะปรับตามผู้ใช้แทนที่จะตายตัวเหมือน px
24px เท่ากับกี่ rem เมื่อ root เป็น 16px?
24px ÷ 16px = 1.5rem เมื่อ root เป็น 16px ค่าทั่วไปคือ 14px = 0.875rem, 16px = 1rem, 20px = 1.25rem, 24px = 1.5rem และ 32px = 2rem ตาราง conversion ในเครื่องมือนี้แสดงค่าทั้งหมดให้ทันที