DevToolPal
ไทย

หน่วย CSS

แปลงvwเป็นpx

แปลงหน่วยความกว้าง viewport (vw) เป็นพิกเซล (px) โดย 1 vw = 19.2 px และ 1 px = 0.05208333333 vw

สูตร

px = vw × 1920 ÷ 100

วิธีแปลง

หากต้องการแปลงหน่วยความกว้าง viewportเป็นพิกเซล ให้ใช้สูตร px = vw × 1920 ÷ 100 ตัวอย่างเช่น 25 vw = 480 px

ตารางแปลง

vw px
1 vw 19.2 px
2 vw 38.4 px
5 vw 96 px
10 vw 192 px
25 vw 480 px
50 vw 960 px
75 vw 1,440 px
100 vw 1,920 px

ตารางนี้คำนวณโดยใช้ความกว้าง viewport 1920px คุณเปลี่ยนการตั้งค่าในตัวแปลงด้านบนให้ตรงกับโปรเจกต์ได้

เกี่ยวกับหน่วยเหล่านี้

เบราว์เซอร์แปลงความยาว CSS ทุกค่าเป็นพิกเซล rem อ้างอิงขนาดฟอนต์ของ root และ em อ้างอิงขนาดฟอนต์ของอิลิเมนต์แม่ ทั้งสองมีค่า 16px ในเบราว์เซอร์หลักทุกตัว เว้นแต่หน้าเว็บหรือผู้ใช้จะเปลี่ยน 1pt คือ 1/72 นิ้ว และ 1px คือ 1/96 นิ้ว ดังนั้น 1pt = 1.333px ส่วน vw คือ 1% ของความกว้าง viewport ค่าพิกเซลจึงขึ้นกับหน้าจอ

คำถามที่พบบ่อย

› แปลง vw เป็น px อย่างไร?

1 vw = 19.2 px ในการแปลงให้ใช้สูตร px = vw × 1920 ÷ 100: 25 vw = 480 px

› 1 px เท่ากับกี่ vw?

1 px = 0.05208333333 vw สูตรย้อนกลับคือ vw = px × 100 ÷ 1920

› ทำไมใช้ rem แทน px?

ขนาดแบบ rem จะปรับตามขนาดฟอนต์ที่ผู้ใช้ตั้งในเบราว์เซอร์ ซึ่งดีต่อการเข้าถึง และเปลี่ยนค่า root เพียงค่าเดียวก็ปรับขนาดเลย์เอาต์ทั้งหมดได้อย่างสม่ำเสมอ

› rem กับ em ต่างกันอย่างไร?

rem ใช้ขนาดฟอนต์ของ root (html) เสมอ ส่วน em ใช้ขนาดฟอนต์ของอิลิเมนต์แม่ ค่า em ที่ซ้อนกันจึงคูณทบกัน