width
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.
Đặc trưng media CSS width có thể được dùng để kiểm tra chiều rộng của viewport (hoặc hộp trang, đối với phương tiện phân trang).
Cú pháp
Đặc trưng width được chỉ định là giá trị <length> đại diện cho chiều rộng viewport. Đây là đặc trưng phạm vi, nghĩa là bạn cũng có thể sử dụng các biến thể có tiền tố min-width và max-width để truy vấn giá trị tối thiểu và tối đa tương ứng.
Ví dụ
HTML
html
<div>Watch this element as you resize your viewport's width.</div>
CSS
css
/* Exact width */
@media (width: 360px) {
div {
color: red;
}
}
/* Minimum width */
@media (min-width: 35rem) {
div {
background: yellow;
}
}
/* Maximum width */
@media (max-width: 50rem) {
div {
border: 2px solid blue;
}
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Media Queries Level 4 # width |