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

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

Một nhà thiết kế gửi một bản mẫu vẽ ở bề rộng 1440 px, với tiêu đề lớn 96 px và khoảng cách giữa các phần 72 px. Trên web thật trang sẽ được xem ở 360 px trên điện thoại, 820 px trên máy tính bảng và 2560 px trên một màn hình lớn, và nhà thiết kế muốn tiêu đề giữ tỷ lệ của nó so với màn hình ở từng cái. Đơn vị sinh ra cho việc đó là bề rộng khung nhìn, vw, và cách đi đến đó từ bản mẫu là chuyển px sang vw: bạn lấy giá trị pixel, chia cho bề rộng mà thiết kế được vẽ, và nhân với một trăm. Một tiêu đề 96 px trên khung 1440 px là 6,67 vw, và từ đó nó luôn là 6,67 phần trăm của bất cứ màn hình nào.

Đó là lời hứa của đơn vị khung nhìn, và cũng là rủi ro của nó. Rem và em bắt đầu từ một cỡ chữ, mà trình duyệt đặt ở một mặc định hợp lý. Vw không có mặc định nào: bề 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 hay kéo cửa sổ. Vì vậy bộ chuyển đổi không giấu con số duy nhất mà đáp án phụ thuộc vào. Bề rộng của thiết kế nằm trong một ô, bắt đầu ở 1440 px, và bạn có thể đổi cho khớp với bản mẫu.

Phép tính chạy 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, phép chuyển đổi giữ được gì và không giữ được gì, nơi đơn vị khung nhìn giúp ích và nơi nó gây hại, vấn đề khả năng tiếp cận mà chữ vw thuần túy tạo ra, kỹ thuật clamp sửa nó, và một phương pháp biến bản mẫu pixel thành bảng định kiểu linh hoạt.

Công thức và bề rộng

vw bằng px chia cho bề rộng, nhân một trăm

Công thức là vw = px ÷ bề rộng × 100. Với bề rộng thiết kế 1440 px, một cỡ 144 px thành 10 vw, 72 px thành 5 vw và 24 px thành 1,667 vw. Trang hiện bề rộng cạnh kết quả, như trong 144 px = 10 vw (1440 px), để bạn thấy điều gì đã được giả định. Một vw là một phần trăm của bề rộng khung nhìn, nên một cửa sổ rộng 1000 px có 1 vw bằng 10 px.

Con số 1440 từ đâu ra

1440 px ở đây là bề rộng mà thiết kế thường được vẽ, một thói quen chứ không phải tiêu chuẩn. Một số nhóm vẽ ở 1280, nhiều nhóm ở 1920, và thiết kế di động ở 375 hoặc 390. Không có đáp án đúng, chỉ có bề rộng mà tệp thiết kế của bạn dùng. Hãy gõ bề rộng của riêng bạn: phép chuyển đổi chỉ tốt bằng bề rộng bạn cho nó.

Dùng bề rộng riêng của thiết kế

Nếu bản mẫu được vẽ ở 1920 px, hãy gõ 1920, và cùng tiêu đề 96 px thành 5 vw. Nếu bạn chuyển px sang vw bằng bề rộng sai, trang sẽ trông đúng ở một cỡ màn hình và sai ở mọi cỡ khác, một lỗi khó hiểu khi bạn không biết phải tìm.

Phép chuyển đổi giữ gì và không giữ được gì

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

Một vw là một phần trăm của bề rộng khung nhìn, nên một cỡ viết bằng vw lớn lên và nhỏ đi cùng cửa sổ thay vì đứng yên. Kết quả là phần của màn hình mà giá trị pixel chiếm trong bản mẫu của bạn, và trong trình duyệt phần tử giữ phần đó ở mọi bề rộng.

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

Khác với rem, vw không có mặc định. Một trình duyệt cho cỡ chữ gốc 16 px khi không ai nói khác, nên một trang rem có thể bắt đầu từ một con số thật; bề 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. Bề rộng trong ô là bề rộng thiết kế của bạn, và đáp án đúng cho một màn hình có bề rộng đó và đúng tỷ lệ ở mọi nơi khác.

Làm tròn

Chia cho 1440 cho số thập phân dài với hầu hết các cỡ. Một giá trị như 6,6667 vw ổn trong một bảng định kiểu, nhưng bạn có thể làm tròn thành 6,67 hoặc 6,7 mà không có thay đổi nhìn thấy được. Hãy giữ hai hoặc ba chữ số sau dấu phẩy; nhiều hơn là nhiễu.

Nơi đơn vị khung nhìn giúp ích

Tiêu đề lớn và chữ trưng bày cỡ lớn

Một tiêu đề phải chiếm một phần nhất định của màn hình trên mọi thiết bị là cách dùng kinh điển. Ở bề rộng điện thoại một tiêu đề 96 px cố định sẽ tràn; tính bằng vw nó co lại cùng màn hình và ở lại trên một dòng.

Các phần tràn viền

Khoảng cách giữa các phần lớn của một trang đích thường trông đẹp nhất khi nó co giãn theo màn hình, để trang giữ nhịp trên một laptop nhỏ và trên một màn hình rộng. Khoảng cách tính bằng vw làm được điều đó.

Hình minh họa phải giữ hình dạng

Ảnh lớn, hình minh họa và các hình trang trí có cỡ tính bằng vw giữ tỷ lệ với cửa sổ, nên bố cục không vỡ khi màn hình đổi.

Chữ linh hoạt có giới hạn

Kết hợp với clamp(), vw cho chữ lớn lên mượt mà giữa mức tối thiểu và tối đa. Đây là kỹ thuật các bảng định kiểu hiện đại dùng cho tiêu đề, và được trình bày bên dưới.

Nơi đơn vị khung nhìn gây hại

Chữ nội dung bằng vw thuần túy

Chữ chỉ có cỡ tính bằng vw không đáp ứng khi người đọc phóng to trang trong trình duyệt, vì phóng to đổi cỡ pixel của cửa sổ nhưng một cỡ vw giữ phần của nó. Những người dựa vào phóng to, thường vì thị lực kém, bị bỏ lại với chữ họ không thể làm lớn hơn. Hướng dẫn về khả năng tiếp cận yêu cầu chữ có thể đổi cỡ, và một cỡ vw thuần túy trượt bài kiểm tra đó.

Hai thái cực nhỏ xíu và khổng lồ

Ở bề rộng 320 px một tiêu đề 6,67 vw là 21 px, có thể quá nhỏ. Ở bề rộng 2560 px nó là 171 px, khổng lồ. Không có giới hạn, tỷ lệ trông đúng ở 1440 có thể vô lý ở hai đầu.

Thanh cuộn

Trên trình duyệt máy tính, bề rộng khung nhìn dùng cho vw bao gồm bề rộng của thanh cuộn dọc. Một hộp đặt là 100vw do đó sẽ rộng hơn vùng nhìn thấy một chút khi trang cuộn, và một thanh cuộn ngang có thể xuất hiện. Hãy biết điều này trước khi bạn xây bố cục toàn bề rộng từ vw.

Kỹ thuật clamp

Đặt sàn và trần

Hàm CSS clamp(min, ưu tiên, max) nhận một giá trị tối thiểu, một giá trị ưu tiên và một giá trị tối đa. Với chữ, hãy viết tối thiểu và tối đa bằng rem, và giá trị ưu tiên bằng vw cộng một số hạng rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). Cỡ lớn lên cùng cửa sổ giữa 32 và 96 px và không bao giờ vượt ra ngoài hai đầu. Vì một phần của nó tính bằng rem, chữ vẫn tôn trọng cài đặt của người đọc.

Cách dựng số hạng ở giữa

Hãy chọn hai bề rộng màn hình và các cỡ bạn muốn ở mỗi cái. Ví dụ 32 px ở bề rộng 360 px và 96 px ở bề rộng 1440 px. Độ dốc là (96 − 32) ÷ (1440 − 360) = 0,0593 px trên mỗi px bề rộng, tức 5,93 vw, và hệ số tự do là 32 − 0,0593 × 360 = 10,67 px, khoảng 0,667 rem. Do đó số hạng ưu tiên là 0.667rem + 5.93vw. Bộ chuyển đổi giúp với phần vw, và một phút tính toán làm phần còn lại.

Vì sao đây là sự cân bằng đúng

Với clamp, bạn có hành vi linh hoạt mà nhà thiết kế muốn và khả năng tiếp cận mà người đọc cần. Đó là câu trả lời cho rắc rối mô tả ở trên, và là lý do hầu hết bảng định kiểu hiện đại chỉ dùng vw bên trong clamp.

Cách chuyển px sang vw ở đây

Gõ giá trị pixel

Hãy nhập cỡ bằng pixel vào ô đầu. Số thập phân được chấp nhận.

Đặt bề rộng của thiết kế

Hãy để 1440 nếu đó là bề rộng của bản mẫu. Hãy đổi nếu không. Kết quả cập nhật khi bạn gõ.

Chép giá trị vw

Hãy dùng con số trong CSS của bạn kèm đơn vị, như trong font-size: 6.67vw. Với chữ, hãy đặt nó bên trong clamp() cùng các giới hạn bằng rem.

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 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 là một độ dài tham chiếu: xấp xỉ 1/96 inch khi nhìn ở khoảng cách đọc thoải mái. Đó là đơn vị mà bản mẫu của bạn được vẽ.

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

Vw ra đời cùng thiết kế đáp ứng: một phần trăm bề rộng của khung nhìn, dù nó là bao nhiêu. Nó đứng cạnh rem, tương đối so với cỡ chữ gốc, và em, tương đối so với phần tử. Nếu bạn cần các cỡ tương đối so với chữ thay vì màn hình, hãy chuyển px sang rem.

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

Dùng sai bề rộng thiết kế

Lỗi phổ biến nhất. Nếu bản mẫu của bạn rộng 1920 và bạn chuyển với 1440, mọi cỡ đều lệch một phần ba. Hãy xác nhận bề rộng của khung trong công cụ thiết kế.

Quên bản thiết kế di động

Nhiều nhóm có hai bản mẫu, một cho máy tính và một cho điện thoại. Một tiêu đề là 96 px ở cái đầu và 40 px ở cái sau không phải một giá trị vw duy nhất. Hãy dùng hai bề rộng, hai phép chuyển đổi và một clamp để nối chúng.

Đặt cả trang vào vw

Một trang mà mọi thứ co giãn theo cửa sổ mất đi cảm giác đọc: dòng quá dài trên màn hình rộng và chữ quá nhỏ trên màn hình hẹp. Hãy dùng vw cho vài thứ nên co giãn, và cỡ cố định hoặc rem cho phần còn lại.

Phớt lờ vấn đề phóng to

Hãy thử trang với trình duyệt phóng to 200 phần trăm. Nếu chữ không lớn lên, các cỡ cần một số hạng rem.

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

100 px là bao nhiêu vw?

Ở bề rộng thiết kế 1440 px, khoảng 6,94 vw.

Bề rộng thiết kế tốt nhất để dùng là gì?

Cái mà bản mẫu của bạn được vẽ. Không có mặc định chung.

Vw có tốt hơn rem không?

Chúng làm những việc khác nhau. Rem đi theo cỡ chữ của người đọc; vw đi theo cửa sổ. Hãy dùng từng cái cho điều nó giỏi.

Tôi có thể dùng vw cho cỡ chữ không?

Có, nhưng hãy đặt nó bên trong clamp() với giới hạn bằng rem, để chữ vẫn đọc được và vẫn phóng to được.

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

Không. Phép toán 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?

Bằng vw sang px, nhân với bề rộng thay vì chia.

Chọn khôn ngoan khi bạn chuyển px sang vw

Quyết định cái gì nên co giãn theo màn hình

Chữ tiêu đề lớn, khoảng cách lớn và hình minh họa: có. Chữ nội dung, đường viền, điều khiển nhỏ: không. Danh sách giá trị vw của bạn càng ngắn, trang càng vững.

Chuyển ở giai đoạn thiết kế

Nếu bạn chuyển px sang vw khi đọc bản mẫu, bạn thấy ngay những giá trị nào ra lẻ và xin nhà thiết kế những giá trị gọn hơn. Một tiêu đề hóa ra là 6,6667 vw mời một cuộc trao đổi về việc làm nó thành 6,5 hay 7.

Ghi lại bề rộng

Hãy viết bề rộng thiết kế trong một chú thích ở đầu bảng định kiểu, để bất kỳ ai chuyển đổi sau này dùng cùng một cái. Các bề rộng lẫn lộn tạo ra một trang không nhất quán theo cách không ai giải thích nổi.

Từ bản mẫu đến bảng định kiểu linh hoạt

Liệt kê các cỡ nên co giãn

Hãy mở tệp thiết kế và ghi ra mọi cỡ bạn muốn đi theo màn hình: tiêu đề lớn, khoảng cách giữa các phần, có thể một hình minh họa lớn. Với mỗi cái, hãy chuyển px sang vw theo bề rộng của khung, và ghi lại kết quả. Hầu hết các trang cuối cùng có ít hơn mười giá trị như vậy, và mọi thứ khác ở lại trong rem hoặc pixel.

Kiểm tra khung di động riêng

Nếu có bản mẫu điện thoại, hãy đọc cùng các phần tử ở bề rộng của nó. Một tiêu đề 96 px trên khung 1440 px và 40 px trên khung 375 px không khớp với giá trị vw đơn nào, đó là dấu hiệu để dùng clamp: cỡ điện thoại thành sàn, cỡ máy tính thành trần, và số hạng vw làm việc ở giữa. Khi bạn chuyển px sang vw cho từng khung, hai con số xác định độ dốc.

Xem lại ở ba bề rộng

Hãy nhìn trang hoàn chỉnh ở khoảng 360, 820 và 1440 pixel, và một lần ở 2560. Bố cục linh hoạt dễ làm đúng ở bề rộng của bản mẫu và sai tinh tế ở nơi khác, và một lượt xem nhanh qua các bề rộng này tìm ra hầu hết vấn đề trước khi khách tìm ra.

Giữ đơn vị này ngoài văn bản dài

Các dòng chữ đọc tốt nhất được đặt cỡ bằng rem, và cho độ dài dòng tối đa khoảng 60 đến 75 ký tự. Hãy dùng đơn vị khung nhìn cho chữ trưng bày và khoảng cách, và để chữ đọc được ổn định.

Các bộ 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 pixel, hãy dùng vw sang px. Với các cỡ tương đối so với gốc, có px sang rem và rem sang px, và với các cỡ tương đối so 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à HEX sang HSL lo các ký hiệu.

Một ví dụ có lời giải

Giả sử một trang đích được thiết kế ở 1440 px, với tiêu đề lớn 96 px và khoảng cách 72 px phía trên. Bạn gõ 96 và đọc 6,667 vw, gõ 72 và đọc 5 vw. Trên một cửa sổ 1000 px, tiêu đề là 66,7 px và khoảng cách 50 px, đúng tỷ lệ. Nhưng trên điện thoại rộng 360 px, tiêu đề sẽ là 24 px, nhỏ hơn bạn muốn, nên bạn viết tiêu đề là clamp(2.25rem, 1rem + 5vw, 6rem), cho sàn 36 px và trần 96 px, và nó vẫn đọc được và phóng to được. Khoảng cách, không có chữ, ở lại bằng vw thuần.

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

Trước khi chuyển đổi

Hãy tìm bề rộng của bản mẫu. Quyết định cỡ nào nên co giãn và cỡ nào không.

Trong khi chuyển đổi

Hãy gõ giá trị pixel và bề rộng thiết kế, và chép con số vw kèm đơn vị.

Sau khi chuyển đổi

Hãy đổi cỡ cửa sổ từ bề rộng điện thoại đến màn hình rộng, và phóng to trang 200 phần trăm. Hãy thêm giới hạn bằng clamp() ở nơi hai thái cực trông sai.

Những lỗi thường gặp

Cho rằng 1440 là tiêu chuẩn

Nó chỉ là thói quen. Hãy dùng bề rộng của riêng bạn.

Đặt cỡ chữ nội dung chỉ bằng vw

Nó không phóng to được. Hãy thêm một số hạng rem và giới hạn.

Quên thanh cuộn

100vw rộng hơn vùng nhìn thấy trên các trang máy tính có cuộ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 tại chỗ. Các giá trị của bạn được dùng bởi chính trình duyệt của bạn 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 px sang vw.

Tóm tắt

Để chuyển px sang vw ở đây, hãy gõ cỡ bằng pixel và bề rộng của thiết kế, và đọc kết quả ngay, dùng công thức vw = px ÷ bề rộng × 100. Bề rộng bắt đầu ở 1440 px, bề rộng mà thiết kế thường được vẽ, nhưng đó là thói quen chứ không phải tiêu chuẩn, nên hãy gõ bề rộng của riêng bạn. Phép chuyển đổi giữ phần của màn hình: một vw là một phần trăm của bề rộng khung nhìn, nên một cỡ tính bằng vw lớn lên và nhỏ đi cùng cửa sổ. Khác với rem, vw không có 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.