Đổi px sang vw, vh, vmin, vmax: công thức, ví dụ số và những cái bẫy khi dùng thật
Công cụ đổi giá trị pixel sang các đơn vị theo khung nhìn của CSS và ngược lại, dựa trên kích thước khung nhìn mà bạn tự nhập hoặc lấy thẳng từ cửa sổ trình duyệt đang mở. Kết quả hiện tới bốn chữ số thập phân cho cả bốn đơn vị cùng lúc, kèm nút sao chép từng giá trị đã có sẵn hậu tố đơn vị.
Tính năng nổi bật
- Đổi một giá trị pixel sang vw, vh, vmin và vmax cùng lúc trong một lần nhập
- Đổi ngược từ vw hoặc vh về pixel theo đúng khung nhìn đang đặt
- Hai ô chiều rộng và chiều cao khung nhìn cho phép nhập kích thước của thiết bị bạn nhắm tới
- Nút lấy nhanh kích thước khung nhìn thật của cửa sổ trình duyệt đang mở
- Kết quả hiển thị tới bốn chữ số thập phân, đủ chính xác cho bố cục thực tế
- Nút sao chép ghép sẵn số với hậu tố đơn vị nên dán thẳng vào tệp CSS được ngay
- Có thêm hai dòng phần trăm chiều rộng và phần trăm chiều cao để đối chiếu ý nghĩa
- Bảng nhắc ngắn giải thích ý nghĩa của bốn đơn vị ngay cạnh phần kết quả
Con số vw chỉ đúng với đúng một kích thước màn hình, và đó là điều cần hiểu trước
Khi thiết kế được giao ở khổ 1920 pixel còn mã nguồn cần chạy trên mọi kích thước, việc đổi số đo sang đơn vị theo khung nhìn nghe rất hợp lý: phần tử sẽ co giãn theo màn hình mà không cần viết truy vấn phương tiện. Nhưng phép đổi này luôn gắn với đúng một kích thước khung nhìn dùng làm mốc, và đó là chỗ nhiều người trượt chân. Một khoảng cách 100 pixel trên khung nhìn rộng 1920 tương đương 5,2083vw; đem con số 5,2083vw đó xuống điện thoại rộng 375 pixel thì nó co lại còn 19,53 pixel. Với khoảng cách thì đôi khi chấp nhận được, nhưng với chữ hoặc với viền thì kết quả thường không dùng được. Vì vậy giá trị của công cụ không nằm ở việc đưa ra một con số để chép nguyên vào tệp CSS, mà nằm ở việc cho bạn thấy cùng một số đo trông ra sao ở các kích thước khung nhìn khác nhau, để bạn quyết định chỗ nào nên dùng đơn vị co giãn và chỗ nào phải giữ nguyên số cố định.
Lợi ích khi sử dụng
- Thấy ngay cả bốn đơn vị nên chọn được đơn vị phù hợp thay vì mặc định lấy vw
- Kiểm tra nhanh một giá trị co giãn sẽ thành bao nhiêu pixel trên màn hình nhỏ nhất bạn hỗ trợ
- Nút lấy khung nhìn hiện tại giúp đối chiếu ngay với cửa sổ đang mở khi đang chỉnh giao diện
- Giá trị sao chép đã có hậu tố nên không mắc lỗi quên đơn vị khiến khai báo CSS bị bỏ qua
- Chạy trong trình duyệt, không cần cài công cụ hay mở bảng tính để tính tay
Cách đổi giữa pixel và đơn vị khung nhìn
- 1Đặt kích thước khung nhìn trước tiên, nhập đúng khổ mà bản thiết kế đang dùng chứ không phải kích thước màn hình bạn đang ngồi làm việc.
- 2Nhập giá trị cần đổi và chọn đơn vị nguồn là pixel để xem cả bốn đơn vị khung nhìn cùng lúc.
- 3Sao chép giá trị cần dùng, phần hậu tố đơn vị đã được ghép sẵn nên dán thẳng vào thuộc tính CSS được ngay.
- 4Đổi ô chiều rộng khung nhìn sang một kích thước khác, ví dụ 375 cho điện thoại, rồi dùng chiều ngược lại để xem con số vừa chọn tương đương bao nhiêu pixel ở đó.
- 5Nếu con số ở đầu nhỏ hoặc đầu lớn không chấp nhận được, hãy chuyển sang cách kẹp giá trị giữa một mức tối thiểu và một mức tối đa thay vì dùng thuần đơn vị khung nhìn.
Bốn đơn vị và công thức phía sau từng đơn vị
Một vw bằng một phần trăm chiều rộng khung nhìn, một vh bằng một phần trăm chiều cao khung nhìn. Vmin lấy theo cạnh ngắn hơn trong hai cạnh, vmax lấy theo cạnh dài hơn. Công thức đổi từ pixel rất đơn giản: chia giá trị pixel cho số đo cạnh tương ứng rồi nhân một trăm. Với khung nhìn 1920 nhân 1080, giá trị 100 pixel cho ra 5,2083vw, 9,2593vh, 9,2593vmin vì cạnh ngắn là chiều cao, và 5,2083vmax vì cạnh dài là chiều rộng. Trên một điện thoại dựng đứng 375 nhân 667 thì cùng 100 pixel đó cho 26,6667vw và 14,9925vh, và lúc này vmin bám theo chiều rộng chứ không phải chiều cao vì hướng màn hình đã đảo. Chính đặc điểm tự đổi mốc theo hướng màn hình khiến vmin và vmax hữu ích cho những phần tử cần giữ tỷ lệ vuông hoặc cần luôn nằm gọn trong khung nhìn dù người dùng xoay ngang hay dọc, chẳng hạn một khối biểu tượng hay một cửa sổ bật lên.
Hai dòng phần trăm trong bảng kết quả không phải đơn vị CSS
Bảng kết quả có thêm hai dòng ghi phần trăm theo chiều rộng và phần trăm theo chiều cao, và về mặt số thì chúng trùng khớp với vw và vh. Chúng ở đó để nhắc bạn ý nghĩa của phép chia, nhưng đừng viết chúng vào CSS như một đơn vị vì CSS không có đơn vị nào tên như vậy. Quan trọng hơn, đơn vị phần trăm trong CSS mang nghĩa hoàn toàn khác: nó tính theo kích thước của phần tử cha chứ không phải theo khung nhìn. Một khối đặt chiều rộng 50 phần trăm nằm trong một khối cha rộng 600 pixel sẽ ra 300 pixel, trong khi 50vw luôn là một nửa khung nhìn bất kể cha rộng bao nhiêu. Sự khác biệt này là gốc của nhiều lỗi bố cục: một phần tử con đặt chiều rộng 100vw nằm trong vùng chứa có lề hai bên sẽ tràn ra khỏi vùng chứa và tạo thanh cuộn ngang. Khi bạn muốn phần tử bám theo vùng chứa, hãy dùng phần trăm; chỉ dùng đơn vị khung nhìn khi bạn thật sự muốn bám theo cửa sổ.
Bẫy kinh điển: 100vw rộng hơn phần nhìn thấy vì thanh cuộn
Trên máy tính để bàn chạy hệ điều hành hiển thị thanh cuộn dọc chiếm chỗ, chiều rộng khung nhìn theo định nghĩa của đơn vị vw bao gồm cả phần thanh cuộn đó. Nghĩa là một phần tử đặt chiều rộng 100vw sẽ rộng hơn vùng nội dung nhìn thấy được khoảng mười lăm tới mười bảy pixel, và trang xuất hiện thanh cuộn ngang không ai muốn. Lỗi này rất hay gặp ở các khối tràn viền kiểu ảnh bìa hoặc dải màu chạy hết chiều ngang. Cách khắc phục đơn giản nhất là dùng chiều rộng 100 phần trăm trên một phần tử có vùng chứa trải hết chiều ngang, vì phần trăm tính trên vùng nội dung nên đã trừ thanh cuộn. Một cách khác là dùng hàm tính toán của CSS để trừ đi chiều rộng thanh cuộn lấy từ hiệu giữa chiều rộng cửa sổ và chiều rộng vùng tài liệu. Lưu ý con số này thay đổi theo hệ điều hành và theo cài đặt của người dùng, và trên điện thoại thì thanh cuộn thường nổi lên trên nội dung nên không chiếm chỗ, khiến lỗi chỉ xuất hiện ở một số máy.
Vấn đề 100vh trên điện thoại và ba đơn vị mới thay thế
Trên trình duyệt di động, thanh địa chỉ và thanh công cụ ẩn hiện theo thao tác cuộn, nên chiều cao thực sự nhìn thấy được thay đổi trong lúc người dùng đang xem. Đơn vị vh trên di động thường được tính theo trạng thái khung nhìn lớn nhất, tức khi các thanh đã thu lại, nên một khối đặt chiều cao 100vh sẽ bị cắt mất phần đáy ngay lúc trang vừa tải, và nút bấm đặt ở đáy khối đó bị đẩy ra ngoài tầm nhìn. Đây là lý do bộ đơn vị mới ra đời: svh tính theo khung nhìn nhỏ nhất tức khi các thanh đang hiện đầy đủ, lvh tính theo khung nhìn lớn nhất, và dvh bám theo kích thước động thay đổi theo thời gian thực. Trong đa số trường hợp, thay 100vh bằng 100dvh giải quyết đúng vấn đề, còn 100svh dùng khi bạn cần chắc chắn toàn bộ nội dung luôn nằm trong tầm nhìn ở mọi trạng thái. Ba đơn vị này đã được các trình duyệt lớn hỗ trợ từ khoảng năm 2022, nhưng công cụ ở đây chỉ tính bốn đơn vị cơ bản nên bạn tự thay hậu tố khi cần.
Đừng đặt cỡ chữ bằng đơn vị khung nhìn thuần, hãy kẹp giá trị
Cỡ chữ 16 pixel trên khung nhìn rộng 1920 quy ra 0,8333vw. Đem con số đó xuống điện thoại rộng 375 pixel thì chữ chỉ còn khoảng 3,1 pixel, không ai đọc được. Ở chiều ngược lại, trên một màn hình rộng 2560 pixel thì chữ phình lên hơn 21 pixel. Đó là lý do dùng đơn vị khung nhìn thuần cho cỡ chữ luôn hỏng ở hai đầu. Còn một vấn đề nghiêm trọng hơn về khả năng tiếp cận: khi cỡ chữ được tính hoàn toàn theo chiều rộng cửa sổ, thao tác phóng to chữ của người dùng gần như mất tác dụng, và điều này đi ngược yêu cầu cho phép người dùng phóng to nội dung tới hai trăm phần trăm. Cách làm đúng hiện nay là kẹp giá trị giữa một mức tối thiểu và một mức tối đa bằng hàm clamp, với phần giá trị co giãn ở giữa gồm một thành phần theo rem cộng một thành phần theo vw, ví dụ clamp với cận dưới 1rem, phần giữa là 0.5rem cộng 2vw và cận trên 2rem. Thành phần rem giữ cho chữ vẫn phản ứng với cài đặt cỡ chữ của người dùng.
Câu hỏi thường gặp (FAQ)
1vw bằng bao nhiêu pixel?
Bằng một phần trăm chiều rộng khung nhìn, nên con số phụ thuộc hoàn toàn vào màn hình. Trên khung nhìn rộng 1920 pixel thì 1vw bằng 19,2 pixel; trên một điện thoại rộng 375 pixel thì 1vw chỉ bằng 3,75 pixel. Đây chính là lý do phải đặt đúng kích thước khung nhìn trước khi đổi.
vmin và vmax dùng khi nào?
Vmin bám theo cạnh ngắn hơn nên hữu ích khi bạn cần phần tử luôn nằm gọn trong khung nhìn dù người dùng xoay ngang hay dọc, chẳng hạn một cửa sổ bật lên hay một khối vuông. Vmax bám theo cạnh dài hơn, thường dùng cho các phần tử nền cần phủ kín ở mọi hướng màn hình.
Vì sao đặt chiều rộng 100vw lại sinh ra thanh cuộn ngang?
Vì chiều rộng khung nhìn dùng cho đơn vị vw bao gồm cả phần thanh cuộn dọc, trong khi vùng nội dung nhìn thấy thì hẹp hơn khoảng mười lăm tới mười bảy pixel trên máy tính để bàn. Hãy dùng chiều rộng 100 phần trăm trên phần tử có vùng chứa trải hết chiều ngang thay vì 100vw.
Vì sao khối 100vh bị cắt đáy trên điện thoại?
Vì thanh địa chỉ và thanh công cụ của trình duyệt di động ẩn hiện theo thao tác cuộn, còn đơn vị vh thường tính theo trạng thái khung nhìn lớn nhất khi các thanh đã thu lại. Hãy thay bằng 100dvh để chiều cao bám theo kích thước thực tế, hoặc 100svh nếu cần chắc chắn nội dung luôn hiện đủ.
Đơn vị svh, lvh và dvh khác nhau ra sao?
Svh tính theo khung nhìn nhỏ nhất, tức khi các thanh của trình duyệt hiện đầy đủ. Lvh tính theo khung nhìn lớn nhất, khi các thanh đã ẩn. Dvh bám theo kích thước động và thay đổi theo thời gian thực khi người dùng cuộn. Công cụ này chỉ tính bốn đơn vị cơ bản nên bạn tự thay hậu tố khi dán vào CSS.
vw và phần trăm khác nhau chỗ nào?
Vw luôn tính theo chiều rộng khung nhìn, còn phần trăm tính theo kích thước của phần tử cha. Một khối rộng 50 phần trăm nằm trong khối cha rộng 600 pixel thì được 300 pixel, còn 50vw thì luôn là nửa cửa sổ dù cha rộng bao nhiêu. Nhầm hai đơn vị này là nguồn của rất nhiều lỗi bố cục tràn viền.
Có nên đặt cỡ chữ bằng vw không?
Không nên dùng thuần vw. Cỡ chữ 16 pixel ở khung nhìn 1920 quy ra khoảng 0,83vw, và giá trị đó xuống điện thoại 375 pixel chỉ còn khoảng 3 pixel. Hãy dùng hàm clamp để kẹp giữa một cận dưới và một cận trên, với phần co giãn ở giữa gồm một thành phần rem cộng một thành phần vw.
Dùng đơn vị khung nhìn cho cỡ chữ có ảnh hưởng khả năng tiếp cận không?
Có. Khi cỡ chữ phụ thuộc hoàn toàn vào chiều rộng cửa sổ, thao tác phóng to chữ của người dùng gần như mất tác dụng, đi ngược yêu cầu cho phép phóng to nội dung tới hai trăm phần trăm mà không mất chức năng. Giữ một thành phần theo rem trong công thức là cách khắc phục đơn giản nhất.
Nên làm tròn giá trị vw đến mấy chữ số thập phân?
Hai chữ số thập phân là đủ cho hầu hết bố cục vì chênh lệch còn lại nhỏ hơn một phần mười pixel trên màn hình thông dụng. Công cụ hiển thị bốn chữ số để bạn tự quyết định mức làm tròn, và với các giá trị nhỏ như viền hay khoảng cách vài pixel thì nên giữ nhiều chữ số hơn.
Nút lấy khung nhìn hiện tại trả về con số gì?
Nó lấy chiều rộng và chiều cao trong của cửa sổ trình duyệt đang mở, tức phần khung nhìn kể cả thanh cuộn nếu có. Con số này thay đổi khi bạn đổi kích thước cửa sổ hoặc mở công cụ dành cho nhà phát triển ở cạnh bên, nên hãy bấm lại nút sau mỗi lần thay đổi bố cục cửa sổ.
Đổi cả bố cục sang đơn vị khung nhìn có bỏ được truy vấn phương tiện không?
Không bỏ hẳn được. Đơn vị khung nhìn giúp các số đo co giãn liên tục nên giảm số điểm ngắt cần dùng, nhưng những thay đổi về cấu trúc như xếp cột thành hàng, ẩn hiện thành phần hay đổi thứ tự thì vẫn cần điểm ngắt. Hãy dùng đơn vị khung nhìn cho kích thước và truy vấn phương tiện cho bố cục.
Giá trị đổi ra có phụ thuộc mật độ điểm ảnh của màn hình không?
Không. Pixel trong CSS là đơn vị lô gic, không phải điểm ảnh vật lý, nên một điện thoại có màn hình rất mịn vẫn báo chiều rộng khung nhìn theo pixel CSS chứ không phải theo số điểm ảnh thật. Vì vậy bạn cứ nhập kích thước theo pixel CSS mà bản thiết kế đang dùng.
Từ khóa liên quan
- đổi px sang vw
- đơn vị vw vh trong css
- vmin vmax là gì
- viewport units css
- chuyển đổi đơn vị css
- 100vh bị cắt trên điện thoại
- dvh svh lvh
- lỗi thanh cuộn ngang 100vw
- css responsive không dùng media query
- clamp css cỡ chữ
- fluid typography
- rem và px khác nhau
- phần trăm và vw khác nhau
- kích thước khung nhìn
- thiết kế responsive
- cỡ chữ theo màn hình
- css hàm calc
- phóng to chữ trình duyệt
- breakpoint responsive
- css đơn vị tương đối
