Hướng dẫn vh css - vh css
Show Đã đăng vào thg 11 19, 2019 9:52 SA 6 phút đọc 6 phút đọc Giới thiệuĐã một vài năm kể từ khi các đơn vị Viewport được giới thiệu trong CSS. Chúng là các đơn vị giúp responsive nghĩa là giá trị của chúng thay đổi mỗi khi thay đổi kích thước trình duyệt. Nếu bạn đã nghe về các đơn vị này trước đây nhưng chưa tìm hiểu về chúng một cách chi tiết, bài viết này có thể giúp bạn hiểu hơn về chúng. Các đơn vị và ý nghĩa của chúngCó 4 đơn vị dựa trên viewport trong CSS. Đó là
Hãy cùng xem các giá trị của các đơn vị này trong các tình huống khác nhau:
Các đơn vị viewport có vẻ như tương tự đơn vị 9. Tuy nhiên, chúng rất khác nhau. Trong trường hợp 9, chiều rộng hoặc chiều cao của phần tử con được xác định đối với phần tử cha của nó. Đây là một ví dụ:Như bạn có thể thấy, chiều rộng của phần tử con đầu tiên được đặt bằng 80% chiều rộng phần tử cha của nó. Tuy nhiên, phần tử con thứ hai có chiều rộng 1, làm cho nó rộng hơn phần tử cha của nó.Ứng dụng của đơn vị ViewportVì các đơn vị này dựa trên kích thước khung nhìn, nên rất thuận tiện để sử dụng chúng trong các tình huống trong đó chiều rộng, chiều cao hoặc kích thước của các yếu tố cần được đặt so với khung nhìn. Fullscreen Background Images or SectionsRất phổ biến đó là đặt hình ảnh nền của phần tử bao phủ hoàn toàn màn hình. Tương tự, bạn có thể muốn thiết kế một trang web trong đó mỗi phần riêng lẻ về một sản phẩm hoặc dịch vụ phải bao phủ toàn bộ màn hình. Trong những trường hợp như vậy, bạn có thể đặt chiều rộng của các phần tử tương ứng bằng 100% và đặt chiều cao của chúng bằng 100vh. HTML code:
CSS code:
Tạo responsive cho TextNhư chúng ta đã đề cập ở trên, giá trị của đơn vị viewport sẽ thay đổi dựa trên kích thước của khung nhìn. Điều này có nghĩa là nếu bạn sử dụng thuộc tính 2 cho thẻ tiêu đề nó sẽ vừa vặn với các kích thước màn hình khác nhau. Khi khung nhìn thay đổi trình duyệt sẽ tự động co dãn font-size phù hợp. Điều duy nhất bạn phải làm đó là set thuộc tính 2 của phần tử bằng đơn vị viewport.Căn giữa phần tửCác đơn vị viewport rất hữu ích khi bạn muốn đặt một yếu tố chính xác ở trung tâm của màn hình. Nếu bạn biết chiều cao của phần tử, bạn chỉ cần đặt giá trị trên cùng và dưới cùng của thuộc tính lề bằng 4.
Browser SupportDựa trên dữ liệu từ caniuse thì hầu hết các trình duyệt đều hỗ trợ đơn vị viewport. Chỉ còn 1 số vấn đề nhỏ trên trình duyệt IE9 và IE10. Kết luậnTrong bài viết này, mình đã đề cập ngắn gọn về ý nghĩa, ứng dụng và hỗ trợ trình duyệt của các đơn vị viewport trong CSS. Nếu bạn biết về bất kỳ vấn đề ứng dụng hoặc trình duyệt thú vị nào khác liên quan đến các đơn vị này, hãy để lại comment phía dưới nhé. Bài viết tham khảo: CSS Viewport Unit All rights reserved |