height
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Tính năng media height trong CSS có thể được dùng để áp dụng kiểu dáng dựa trên chiều cao của viewport (hoặc hộp trang, đối với phương tiện phân trang).
Cú pháp
Tính năng height được xác định bởi giá trị <length> đại diện cho chiều cao của viewport. Đây là tính năng phạm vi, nghĩa là bạn cũng có thể dùng các biến thể có tiền tố min-height và max-height để truy vấn giá trị tối thiểu và tối đa tương ứng.
Ví dụ
HTML
html
<div>Hãy quan sát phần tử này khi bạn thay đổi chiều cao viewport.</div>
CSS
css
/* Chiều cao chính xác */
@media (height: 360px) {
div {
color: red;
}
}
/* Chiều cao tối thiểu */
@media (min-height: 25rem) {
div {
background: yellow;
}
}
/* Chiều cao tối đa */
@media (max-height: 40rem) {
div {
border: 2px solid blue;
}
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| Media Queries Level 4 # height |