ตัวแปลง PX เป็น REM
ตัวแปลง pixel เป็น REM ออนไลน์ฟรี แปลง px เป็น rem ทันทีพร้อม root font-size ที่กำหนดเองได้, conversion table ครบถ้วน, ค่า Tailwind breakpoint (sm, md, lg, xl, 2xl) และค่า CSS ที่ copy ได้ทันที ทำงานฝั่ง client 100%
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 ไม่ต้องสมัคร