Đơn vị viewport

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 64 trên 76.

Trong CSS, đơn vị khung nhìn là các đơn vị đo tương đối dựa trên kích thước khung nhìn của trình duyệt (vùng hiển thị của trang web). Chúng giúp tạo thiết kế thích ứng bằng cách đặt kích thước cho các phần tử và văn bản theo tỷ lệ với chiều rộng hoặc chiều cao của khung nhìn. Đơn vị khung nhìn đặc biệt hữu ích khi tạo bố cục linh hoạt, điều chỉnh kích thước văn bản và định vị các phần tử sao cho phù hợp với nhiều kích thước màn hình khác nhau.

Có bốn đơn vị khung nhìn:

vw (chiều rộng khung nhìn): Đại diện cho 1% chiều rộng của khung nhìn. Ví dụ: 10vw bằng 10% chiều rộng của khung nhìn.

vh (chiều cao khung nhìn): Tương ứng với 1% chiều cao của khung nhìn. Ví dụ, 25vh bằng 25% chiều cao của khung nhìn.

vmin (viewport minimum): Đại diện cho 1% của chiều nhỏ hơn trong khung nhìn (chiều rộng hoặc chiều cao). Ví dụ, nếu khung nhìn rộng hơn chiều cao, 5vmin bằng 5% chiều cao của khung nhìn.

vmax (tối đa của khung nhìn): Tương ứng với 1% của kích thước lớn hơn trong hai chiều của khung nhìn (chiều rộng hoặc chiều cao). Ví dụ, nếu khung nhìn rộng hơn chiều cao, 8vmax bằng 8% chiều rộng của khung nhìn.

Đây là cú pháp cơ bản để dùng đơn vị viewport:

selector {
    property: value;
}

selector: Bộ chọn CSS nhắm đến (các) phần tử HTML mà bạn muốn định kiểu.

property: Thuộc tính CSS mà bạn muốn đặt (ví dụ: width, height, font-size, margin, padding).

value: Giá trị có đơn vị khung nhìn (ví dụ: 50vw, 75vh, 10vmin, 5vmax).

Ví dụ:

.box {
    width: 50vw; /* Chiều rộng của hộp bằng 50% chiều rộng của vùng hiển thị */
    height: 30vh; /* Chiều cao của hộp bằng 30% chiều cao của vùng hiển thị */
}

Trong ví dụ này, phần tử .box có chiều rộng 50vw và chiều cao 30vh, nên có thể thích ứng với cả chiều rộng lẫn chiều cao của khung nhìn.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề (<h1>), đoạn văn (<p>) và phần tử chia (<div>). Nhiệm vụ của bạn là dùng đơn vị khung nhìn để làm cho các phần tử này thích ứng. Hãy làm theo các bước dưới đây:

Viết quy tắc CSS nhắm đến phần tử <h1>. Đặt font-size thành 6vw.
Viết quy tắc CSS nhắm đến phần tử <p>. Đặt font-size thành 4vmin.
Viết quy tắc CSS nhắm đến phần tử <div>. Đặt width thành 80vw và height thành 50vh.

Tự làm thử

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>