resolution
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
Đặc trưng media CSS resolution có thể được dùng để kiểm tra mật độ pixel của thiết bị đầu ra.
Cú pháp
Đặc trưng resolution được chỉ định là giá trị <resolution> đại diện cho mật độ pixel của thiết bị đầu ra. Đây là đặc trư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-resolution và max-resolution để truy vấn các giá trị tối thiểu và tối đa tương ứng.
Ví dụ
HTML
html
<p>This is a test of your device's pixel density.</p>
CSS
css
/* Exact resolution with unit `dpi` */
@media (resolution: 150dpi) {
p {
color: red;
}
}
/* Minimum resolution synonym units: `dppx` and `x` */
@media (min-resolution: 2dppx) {
p {
text-decoration: underline;
}
}
@media (min-resolution: 2x) {
p {
text-decoration: underline;
}
}
/* Maximum resolution with unit `dpcm` */
@media (max-resolution: 2dpcm) {
p {
background: yellow;
}
}
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Media Queries Level 4 # resolution |
Khả năng tương thích với trình duyệt
Xem thêm
window.devicePixelRatio- Thuộc tính
image-resolution