Chuyển vw sang px Viewport width ↔ Pixels Miễn phí Trực tuyến An toàn

Vì sao bạn chuyển vw sang px

Một bảng định kiểu ghi font-size: 5.2vw cho tiêu đề chính, margin-top: 8vw cho một khu vực và width: 42vw cho một bức ảnh. Đó là những giá trị linh hoạt, và chúng không cho bạn biết điều gì đang có trên màn hình. Tiêu đề lớn đến đâu trên điện thoại? Bức ảnh rộng bao nhiêu trên laptop? Lề trông có đúng ở 1920 pixel không? Để biết, bạn chuyển vw sang px: bạn nhân con số với độ rộng của cửa sổ rồi chia cho một trăm, và đọc đáp án bằng đơn vị mà nhà thiết kế, người kiểm thử và khách hàng dùng. Đó là việc bạn làm khi rà soát mã linh hoạt, đối chiếu một bản dựng với bản phác thảo hoặc giải thích cho đồng nghiệp vì sao tiêu đề trông nhỏ trên màn hình hẹp.

Điều khiến phép chuyển đổi này khác với rem hay em là hệ số nhân chính là cửa sổ. Một vw là một phần trăm độ rộng khung nhìn (viewport), nên 5,2vw là 52 px trong cửa sổ rộng 1000 px, 18,7 px trên điện thoại rộng 360 px và 99,8 px trên màn hình rộng 1920. Không có giá trị mặc định nào để dựa vào, và độ rộng đổi khi người đọc xoay điện thoại hoặc kéo cửa sổ. Vì vậy công cụ chuyển đổi hỏi độ rộng, hiển thị nó bên cạnh đáp án và bắt đầu ở 1440 px, một độ rộng mà các thiết kế thường được vẽ ở đó.

Phép tính diễn ra trong trình duyệt của bạn, và không có gì được tải lên. Bên dưới bạn sẽ thấy công thức, điều mà phép chuyển đổi giữ lại và không thể giữ lại, cách đọc một bảng định kiểu linh hoạt ở nhiều độ rộng, cái bẫy của thanh cuộn, vấn đề trợ năng của chữ chỉ dùng vw, và vài thói quen giúp mã linh hoạt dễ hiểu.

Công thức và độ rộng

px bằng vw nhân với độ rộng, chia cho một trăm

Công thức là px = vw × width ÷ 100. Ở độ rộng 1440 px, 10 vw thành 144 px, 5 vw thành 72 px và 1,667 vw thành 24 px. Trang in độ rộng bên cạnh kết quả, nên một dòng như 10 vw = 144 px (1440 px) cho bạn biết điều gì đã được giả định. Để xem một màn hình khác, hãy đổi độ rộng và đọc lại kết quả.

Nên thử những độ rộng nào

Một bộ hữu ích để kiểm tra là 360 hoặc 390 cho điện thoại, 768 cho máy tính bảng dọc, 1024 cho laptop nhỏ, 1440 cho laptop hay máy tính để bàn điển hình và 1920 cho màn hình full-HD. Gõ từng cái vào ô độ rộng và ghi lại kết quả. Năm lần đọc cho bạn thấy toàn bộ phạm vi của một giá trị, và mọi cực đoan đều nhảy ra.

Dùng độ rộng của cửa sổ thực tế

Trong công cụ dành cho nhà phát triển của trình duyệt, thanh thiết bị hiển thị độ rộng của cửa sổ bằng pixel. Hãy dùng con số đó để so sánh điều trang làm với điều công cụ chuyển đổi nói. Nếu chúng khớp, cách bạn đọc bảng định kiểu là đúng.

Phép chuyển đổi giữ lại gì và không thể giữ lại gì

Nó giữ phần trăm của màn hình

Một vw là một phần trăm độ rộng khung nhìn, nên một kích thước viết bằng vw lớn lên và co lại cùng cửa sổ thay vì đứng yên. Giá trị pixel bạn nhận được là phần ấy được cụ thể hóa cho một độ rộng nhất định.

Nó không thể cho một giá trị mặc định

Không như rem, vw không có giá trị mặc định. Trình duyệt đặt cỡ chữ gốc là 16 px khi không ai nói gì khác, nên một trang dùng rem có thể bắt đầu từ một con số thực; độ rộng khung nhìn đơn giản là cửa sổ của người đọc rộng bao nhiêu, và nó đổi khi họ xoay điện thoại. Con số 1440 px ở đây là một độ rộng mà các thiết kế thường được vẽ ở đó, một thói quen chứ không phải một chuẩn. Hãy gõ con số của riêng bạn.

Làm tròn

Nhân với độ rộng rồi chia cho 100 có thể tạo ra số thập phân. 6,67 vw ở 1440 px là 96,048 px. Trình duyệt xử lý được pixel lẻ, nhưng nếu bạn cần một số nguyên cho tệp thiết kế, hãy làm tròn và ghi chú rằng việc làm tròn là của bạn.

Đọc một bảng định kiểu linh hoạt

Lấy ba độ rộng và ghi lại kết quả

Chọn một độ rộng hẹp, một trung bình và một rộng, ví dụ 375, 1024 và 1920. Với mỗi giá trị vw quan trọng trong bảng định kiểu, hãy chuyển vw sang px ở từng độ rộng và ghi ba con số vào một ghi chú. Một tiêu đề 5,2 vw cho 19,5, 53,2 và 99,8 pixel. Nhìn theo cách này, bạn biết tiêu đề có đọc được ở đầu hẹp và không áp đảo ở đầu rộng.

Tìm clamp

Mã linh hoạt viết tốt đặt giới hạn quanh vw bằng clamp(min, preferred, max). Nếu bạn thấy clamp(2rem, 1rem + 4vw, 6rem), kích thước tăng giữa 32 và 96 px và giữ nguyên ở cả hai đầu. Khi bạn chuyển phần vw, hãy nhớ rằng nó chỉ là phần giữa của phạm vi, và các giới hạn quyết định điều xảy ra ở mép.

Kiểm tra các cực đoan

Những độ rộng rủi ro là nhỏ nhất và lớn nhất. Ở 320 px một tiêu đề 6 vw là 19 px; ở 2560 nó là 154 px. Nếu không cái nào trông chấp nhận được và không có clamp, bảng định kiểu cần giới hạn.

Những cái bẫy khi bạn chuyển vw sang px

Thanh cuộn

Trên trình duyệt máy tính, độ rộng khung nhìn dùng cho vw bao gồm độ rộng của thanh cuộn dọc. Vì vậy 100vw rộng hơn một chút so với vùng nhìn thấy khi trang cuộn, khoảng 15 đến 17 pixel trên nhiều hệ thống. Giá trị pixel bạn tính vì thế lớn hơn một chút so với độ rộng nhìn thấy mà nó có vẻ đại diện. Trên điện thoại, nơi thanh cuộn phủ lên trang, hiệu ứng này không có.

Dùng sai độ rộng

Kết quả chỉ đúng bằng độ rộng bạn gõ. Nếu cửa sổ kiểm thử của bạn rộng 1366 px và bạn chuyển ở 1440, mọi giá trị lệch khoảng năm phần trăm. Hãy đọc độ rộng thực từ công cụ nhà phát triển.

Nhầm vw với phần trăm

Một độ rộng 50% tham chiếu độ rộng của phần tử cha, trong khi 50vw tham chiếu cửa sổ. Bên trong một vùng chứa hẹp hai thứ rất khác nhau. Công cụ chuyển đổi cho đáp án vw; nếu phần tử của bạn nằm trong một vùng chứa, phần tử cha có thể hẹp hơn cửa sổ.

Quên rằng chữ dùng vw không thể phóng to

Chữ chỉ có kích thước bằng vw không phản hồi khi người đọc phóng to trang, vì cửa sổ và chữ co giãn cùng nhau. Hướng dẫn về trợ năng yêu cầu chữ có thể đổi cỡ. Hãy thêm một thành phần rem, như trong clamp(), để chữ cũng phản hồi với việc phóng to.

Những câu hỏi người ta hỏi trước khi chuyển đổi

1 vw là bao nhiêu pixel?

Một phần trăm độ rộng cửa sổ: 14,4 px ở 1440, 10 px ở 1000, 3,6 px ở 360.

50 vw là bao nhiêu pixel?

Một nửa cửa sổ: 720 px khi rộng 1440, 500 px khi rộng 1000.

Vì sao trang của tôi rộng hơn màn hình?

Một hộp 100vw trên trang có cuộn rộng hơn vùng nhìn thấy vì thanh cuộn được tính. Hãy dùng 100% bên trong vùng chứa thay vào đó.

vw có giống phần trăm không?

Không. Phần trăm tham chiếu phần tử cha, vw tham chiếu cửa sổ.

Con số của tôi có được tải lên không?

Không. Phép tính chạy trong trình duyệt của bạn và không có gì được gửi đi đâu.

Làm sao để quay lại?

Với px sang vw, chia cho độ rộng thay vì nhân.

Giá trị phổ biến ở các độ rộng phổ biến

Một bảng trong đầu

Biết vài điểm neo sẽ giúp bạn ước lượng trước khi dùng công cụ chuyển đổi. Ở độ rộng 1000 px, 1 vw là 10 px, khiến phép tính trở nên đơn giản: 2,5 vw là 25 px, 8 vw là 80 px. Ở 1440 px, 1 vw là 14,4 px. Ở 375 px, 1 vw là 3,75 px, nên một tiêu đề 8 vw là 30 px. Khi bạn chuyển vw sang px để kiểm tra nhanh, hãy bắt đầu từ một trong các điểm neo này và co giãn.

Ba độ rộng, một bảng định kiểu

Lấy một thẻ có độ rộng 80vw, khoảng cách 4vw và tiêu đề 6vw. Trên điện thoại 375 px chúng là 300 px, 15 px và 22,5 px. Trên máy tính bảng 768 px, là 614 px, 30,7 px và 46 px. Trên máy tính để bàn 1440 px, là 1152 px, 57,6 px và 86,4 px. Nhìn cả ba cạnh nhau cho bạn biết ngay rằng thẻ quá rộng trên máy tính để bàn và tiêu đề quá lớn, và rằng bạn có lẽ muốn một độ rộng tối đa và một clamp.

Ngoài khung nhìn

Đơn vị vùng chứa

CSS mới hơn cung cấp các đơn vị tương đối với vùng chứa thay vì cửa sổ, như cqw, là một phần trăm độ rộng của vùng chứa. Chúng giải quyết vấn đề rằng một thành phần đặt trong thanh bên hẹp hành xử như thể nó có cả cửa sổ. Nếu bạn dùng chúng, phép tính giống như với vw, với độ rộng của vùng chứa làm cơ sở, và bạn có thể dùng công cụ chuyển đổi này bằng cách gõ độ rộng đó.

Khung nhìn nhỏ, lớn và động

Trên điện thoại, vùng nhìn thấy đổi khi thanh địa chỉ trượt đi. Với chiều cao, các đơn vị mới hơn svh, lvh và dvh mô tả khung nhìn nhỏ, lớn và động. Với chiều rộng, tình huống đơn giản hơn, vì thanh địa chỉ không ảnh hưởng, và vw ổn định. Đó là thêm một lý do khiến vw là đơn vị an toàn hơn vh cho thiết kế linh hoạt trên di động.

Phần trăm, vw và lưới

Độ rộng phần trăm theo phần tử cha, vw theo cửa sổ, còn lưới CSS và flexbox theo không gian sẵn có. Thường các bố cục linh hoạt tốt nhất dùng lưới và phần trăm cho cấu trúc và chỉ dùng vw cho chữ và khoảng cách, vì đó là những thứ hưởng lợi từ việc đi theo màn hình trực tiếp. Khi bạn chuyển vw sang px để kiểm tra một bố cục, hãy hỏi liệu một rãnh lưới có nói cùng điều đó chắc chắn hơn không.

Giải thích vw cho những người không viết CSS

Dùng cửa sổ làm thước

Khách hàng và đồng nghiệp thường hiểu ý tưởng khi bạn nói rằng một vw là một phần trăm độ rộng của màn hình. Một tiêu đề 5 vw rộng năm phần trăm màn hình. Rồi cho họ xem hai con số: nó là bao nhiêu trên điện thoại của chính họ và trên màn hình lớn trong phòng họp. Khi bạn chuyển vw sang px cho cả hai độ rộng và đọc to kết quả, ý tưởng về một kích thước di chuyển cùng màn hình trở nên cụ thể.

Nói vì sao thiết kế không cố định

Các bên liên quan không chuyên đôi khi hỏi vì sao trang không đơn giản có một cỡ cho tiêu đề. Câu trả lời là màn hình khác nhau gấp bảy hoặc tám lần giữa chiếc điện thoại nhỏ nhất và màn hình lớn nhất, và một kích thước cố định phù hợp với cái này là sai với cái kia. Đơn vị linh hoạt là câu trả lời, và các con số pixel từ trang này cho thấy màn hình thay đổi cùng một giá trị nhiều đến mức nào.

Các đơn vị này đến từ đâu

Pixel CSS

Khi màn hình thôi có mật độ dự đoán được, một trang đo bằng pixel thật trở thành một trang co lại khi màn hình sắc nét hơn. Vì vậy pixel CSS được định nghĩa lại như một độ dài tham chiếu: khoảng 1/96 inch nhìn ở khoảng cách đọc thoải mái. Đó là đơn vị mà trang này đưa ra đáp án.

Các đơn vị khung nhìn

vw ra đời cùng thiết kế đáp ứng: một phần trăm độ rộng khung nhìn, bất kể nó là bao nhiêu. Nó nằm cạnh rem, tương đối với cỡ chữ gốc, và em, tương đối với phần tử. Để xem cùng giá trị pixel trông thế nào trong các đơn vị đó, hãy chuyển rem sang px và so sánh.

Những thói quen giữ cho mã linh hoạt dễ hiểu

Ghi chú các giá trị pixel

Một dòng như font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ tốn vài từ và tiết kiệm cho người đọc sau vài phép chuyển đổi.

Giữ độ rộng thiết kế ở một nơi

Nếu dự án của bạn có một thuộc tính tùy chỉnh cho độ rộng mà thiết kế được vẽ, mọi giá trị vw đều có thể truy về nó. Khi bạn chuyển vw sang px để rà soát, bạn biết dùng độ rộng nào.

Dùng vw tiết kiệm

Một danh sách ngắn các giá trị vw dễ suy luận. Một bảng định kiểu mà mọi thứ đều bằng vw thì không. Hãy giữ nó cho chữ trình diễn, khoảng cách lớn và tác phẩm.

Kiểm thử bằng thiết bị thật khi quan trọng

Công cụ trình duyệt mô phỏng độ rộng tốt, nhưng một chiếc điện thoại thật cho thấy hành vi thực của thanh địa chỉ, việc xoay và phóng to. Một lần kiểm tra năm phút trên thiết bị bắt được điều mô phỏng bỏ sót.

Các công cụ chuyển đổi liên quan

Cùng họ công cụ bao gồm các phép chuyển đổi lân cận. Để quay lại vw, hãy dùng px sang vw. Với kích thước tương đối với gốc có px sang rem và rem sang px, và với kích thước tương đối với phần tử, px sang em và em sang px. Với màu sắc của cùng bảng định kiểu, HEX sang RGB và RGB sang HEX xử lý các ký hiệu.

Một ví dụ đã giải

Giả sử một người kiểm thử báo rằng tiêu đề chính khó đọc trên điện thoại nhỏ. Bảng định kiểu ghi font-size: 5.2vw không có giới hạn. Bạn chuyển vw sang px ở 360 và đọc 18,7 px, ở 768 đọc 39,9 px, ở 1440 đọc 74,9 px. Ở đầu hẹp tiêu đề lớn hơn chữ thân bài một chút và không còn đọc như một tiêu đề. Bạn đề xuất clamp(2rem, 1rem + 4vw, 5rem), cho 32 px ở hẹp nhất, khoảng 51 px ở 768 và 5rem, 80 px, ở rộng nhất. Người kiểm thử xác nhận rằng giờ nó đọc tốt, và tiêu đề vẫn co giãn.

Một danh sách kiểm tra ngắn

Trước khi chuyển đổi

Chọn các độ rộng bạn quan tâm, từ công cụ nhà phát triển hoặc từ danh sách thiết bị mục tiêu của bạn.

Trong khi chuyển đổi

Gõ giá trị vw và lần lượt từng độ rộng, và ghi lại số pixel hiển thị bên cạnh cơ sở.

Sau khi chuyển đổi

Nhìn vào các cực đoan. Nếu một kích thước quá nhỏ hoặc quá lớn ở một đầu, hãy thêm giới hạn bằng clamp().

Những sai lầm thường gặp

Giả định một đáp án duy nhất

Một giá trị vw có kích thước pixel khác nhau ở mỗi độ rộng. Hãy nêu độ rộng cùng mọi con số.

Quên thanh cuộn

100vw bao gồm nó, nên một hộp toàn chiều rộng có thể tràn.

Đặt cỡ chữ thân bài chỉ bằng vw

Nó không thể phóng to. Hãy thêm một thành phần rem và giới hạn.

Con số của bạn ở lại trên thiết bị của bạn

Phép tính diễn ra cục bộ. Giá trị của bạn được trình duyệt của chính bạn dùng và không có gì được gửi đi đâu. Không có gì để xóa sau đó và không có tài khoản để tạo. Đó là cách giản dị để chuyển vw sang px.

Tóm tắt

Để chuyển vw sang px ở đây, hãy gõ kích thước bằng vw và độ rộng của cửa sổ, và đọc ngay kết quả bằng pixel, dùng công thức px = vw × width ÷ 100. Độ rộng bắt đầu ở 1440 px, một độ rộng mà các thiết kế thường được vẽ ở đó, nhưng đó là thói quen chứ không phải chuẩn, nên hãy gõ con số của riêng bạn. Phép chuyển đổi giữ phần trăm của màn hình: một vw là một phần trăm độ rộng khung nhìn, nên một kích thước bằng vw lớn lên và co lại cùng cửa sổ. Không như rem, vw không có giá trị mặc định, vì khung nhìn rộng bao nhiêu là tùy cửa sổ của người đọc. Với chữ, hãy kết hợp vw với rem bên trong clamp(), để nó vẫn đọc được và phóng to được. Không có gì được tải lên.