กรอกตัวเลข
1 px = 0.05208333333 vw
เปิดใน แปลง PX เป็น REMสูตร
vw = px × 100 ÷ 1920
วิธีแปลง
หากต้องการแปลงพิกเซลเป็นหน่วยความกว้าง viewport ให้ใช้สูตร vw = px × 100 ÷ 1920 ตัวอย่างเช่น 32 px = 1.666666667 vw
ตารางแปลง
| px | vw |
|---|---|
| 1 px | 0.05208333333 vw |
| 2 px | 0.1041666667 vw |
| 4 px | 0.2083333333 vw |
| 8 px | 0.4166666667 vw |
| 10 px | 0.5208333333 vw |
| 12 px | 0.625 vw |
| 14 px | 0.7291666667 vw |
| 16 px | 0.8333333333 vw |
| 18 px | 0.9375 vw |
| 20 px | 1.041666667 vw |
| 24 px | 1.25 vw |
| 32 px | 1.666666667 vw |
| 48 px | 2.5 vw |
| 64 px | 3.333333333 vw |
ตารางนี้คำนวณโดยใช้ความกว้าง viewport 1920px คุณเปลี่ยนการตั้งค่าในตัวแปลงด้านบนให้ตรงกับโปรเจกต์ได้
เกี่ยวกับหน่วยเหล่านี้
เบราว์เซอร์แปลงความยาว CSS ทุกค่าเป็นพิกเซล rem อ้างอิงขนาดฟอนต์ของ root และ em อ้างอิงขนาดฟอนต์ของอิลิเมนต์แม่ ทั้งสองมีค่า 16px ในเบราว์เซอร์หลักทุกตัว เว้นแต่หน้าเว็บหรือผู้ใช้จะเปลี่ยน 1pt คือ 1/72 นิ้ว และ 1px คือ 1/96 นิ้ว ดังนั้น 1pt = 1.333px ส่วน vw คือ 1% ของความกว้าง viewport ค่าพิกเซลจึงขึ้นกับหน้าจอ
คำถามที่พบบ่อย
› แปลง px เป็น vw อย่างไร?
1 px = 0.05208333333 vw ในการแปลงให้ใช้สูตร vw = px × 100 ÷ 1920: 32 px = 1.666666667 vw
› 1 vw เท่ากับกี่ px?
1 vw = 19.2 px สูตรย้อนกลับคือ px = vw × 1920 ÷ 100
› ทำไมใช้ rem แทน px?
ขนาดแบบ rem จะปรับตามขนาดฟอนต์ที่ผู้ใช้ตั้งในเบราว์เซอร์ ซึ่งดีต่อการเข้าถึง และเปลี่ยนค่า root เพียงค่าเดียวก็ปรับขนาดเลย์เอาต์ทั้งหมดได้อย่างสม่ำเสมอ
› rem กับ em ต่างกันอย่างไร?
rem ใช้ขนาดฟอนต์ของ root (html) เสมอ ส่วน em ใช้ขนาดฟอนต์ของอิลิเมนต์แม่ ค่า em ที่ซ้อนกันจึงคูณทบกัน