ตัวแปลง PX-REM
แปลงหน่วย px กับ rem ของ CSS ได้สองทางตามขนาดฟอนต์รากที่กำหนดเอง รองรับทศนิยม พร้อมตารางอ้างอิงและสไนปเพ็ต CSS ให้คัดลอก ใช้ฟรี
px (ฐาน: 16px)
1rem
font-size: 1rem;px ↔ rem ตารางอ้างอิง (ขนาดฟอนต์อ้างอิง: 16px)
| px | rem | คัดลอก |
|---|---|---|
| 8px | 0.5rem | |
| 10px | 0.625rem | |
| 12px | 0.75rem | |
| 14px | 0.875rem | |
| 16px | 1rem | |
| 18px | 1.125rem | |
| 20px | 1.25rem | |
| 24px | 1.5rem | |
| 28px | 1.75rem | |
| 32px | 2rem | |
| 36px | 2.25rem | |
| 40px | 2.5rem | |
| 48px | 3rem | |
| 56px | 3.5rem | |
| 64px | 4rem | |
| 72px | 4.5rem | |
| 80px | 5rem | |
| 96px | 6rem |
ฝัง
อัปเดตล่าสุด: 2026 · เครื่องมือออนไลน์ฟรี
ตัวแปลง PX-REM คืออะไร?
แปลงหน่วย px กับ rem ของ CSS ได้สองทางตามขนาดฟอนต์รากที่กำหนดเอง รองรับทศนิยม พร้อมตารางอ้างอิงและสไนปเพ็ต CSS ให้คัดลอก ใช้ฟรี
วิธีใช้งาน
- 1ตั้งค่าขนาดฟอนต์รูท— ตั้งค่าขนาดฟอนต์ของ root element (ค่าเริ่มต้น 16px)
- 2ป้อนค่า PX หรือ REM— ป้อนตัวเลขในช่อง PX หรือ REM
- 3ดูผลลัพธ์— ค่าของหน่วยอื่นจะถูกคำนวณอัตโนมัติ
- 4คัดลอกผลลัพธ์— คลิกปุ่มคัดลอกเพื่อคัดลอกค่า CSS
เครื่องมือที่เกี่ยวข้อง
อ้างอิงหน่วย CSSคู่มืออ้างอิงหน่วย CSS px, em, rem, %, vw, vh, vmin, vmax และ ch จัดตามหมวด พร้อมอธิบายว่าควรใช้หน่วยสัมบูรณ์และสัมพัทธ์เมื่อใด ใช้ฟรี
ตัวสร้าง CSS Gradientสร้าง CSS gradient แบบภาพ ทั้ง linear, radial และ conic เพิ่มจุดสี ปรับมุม แล้วคัดลอก CSS ไปใช้กับพื้นหลังและปุ่มได้ทันที ใช้ฟรีในเบราว์เซอร์
ตัวแปลงรหัสสีแปลงสีระหว่างรหัส HEX, RGB, HSL และ OKLCH ได้ทันที พร้อมคำนวณอัตราส่วนคอนทราสต์ WCAG ของสองสีเพื่อตรวจการเข้าถึง ใช้ฟรีในเบราว์เซอร์
ตัวสร้าง CSS Box Shadowเครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับ offset, blur, spread, สี และ inset พร้อมพรีวิวเงาเรียลไทม์และคัดลอกโค้ด CSS ได้ทันที
คำถามที่พบบ่อย
PX เป็นหน่วยพิกเซลคงที่ REM เป็นหน่วยสัมพัทธ์ตามขนาดฟอนต์ของ root element REM เหมาะกว่าสำหรับ responsive design
ขนาดฟอนต์รูทเริ่มต้นของเบราว์เซอร์คือ 16px หมายความว่า 1rem = 16px
REM ช่วยให้ผู้ใช้ปรับขนาดฟอนต์ผ่านการตั้งค่าเบราว์เซอร์ ช่วยเพิ่มการเข้าถึง
ไม่ การแปลงทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ