DevToolPal
VI

Đơn vị CSS

Đổi px sang vw

Đổi pixel (px) sang đơn vị chiều rộng viewport (vw). 1 px = 0,05208333333 vw và 1 vw = 19,2 px.

Công thức

vw = px × 100 ÷ 1920

Cách chuyển đổi

Để đổi pixel sang đơn vị chiều rộng viewport, hãy dùng công thức vw = px × 100 ÷ 1920. Ví dụ: 32 px = 1,666666667 vw.

Bảng quy đổi

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

Bảng giả định chiều rộng viewport 1920px. Hãy đổi cài đặt trong bộ chuyển đổi phía trên cho khớp với dự án của bạn.

Về các đơn vị này

Trình duyệt quy đổi mọi độ dài CSS ra pixel. rem tính theo cỡ chữ gốc, em tính theo cỡ chữ của phần tử cha; cả hai đều là 16px trên mọi trình duyệt lớn trừ khi trang hoặc người dùng thay đổi. 1pt là 1/72 inch và 1px là 1/96 inch, nên 1pt = 1,333px. vw là 1% chiều rộng viewport, nên số pixel phụ thuộc vào màn hình.

Câu hỏi thường gặp

› Làm sao đổi px sang vw?

1 px = 0,05208333333 vw. Để đổi, hãy dùng công thức vw = px × 100 ÷ 1920: 32 px = 1,666666667 vw.

› 1 vw bằng bao nhiêu px?

1 vw = 19,2 px. Công thức ngược là px = vw × 1920 ÷ 100.

› Vì sao dùng rem thay cho px?

Kích thước rem theo cỡ chữ người dùng đặt trong trình duyệt, tốt cho khả năng tiếp cận, và chỉ cần đổi một giá trị gốc là toàn bộ bố cục co giãn nhất quán.

› rem và em khác nhau thế nào?

rem luôn dùng cỡ chữ gốc (html). em dùng cỡ chữ của phần tử cha, nên các giá trị em lồng nhau sẽ nhân lên.