-webkit-device-pixel-ratio
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
Tính năng phương tiện -webkit-device-pixel-ratio là một tính năng phương tiện Boolean CSS media feature không chuẩn, là sự thay thế cho tính năng phương tiện chuẩn resolution.
Note:
Nếu có thể, hãy sử dụng feature query tính năng phương tiện resolution thay thế, đây là tính năng phương tiện chuẩn. Mặc dù tính năng phương tiện có tiền tố này là một tính năng WebKit, các công cụ trình duyệt khác cũng có thể hỗ trợ nó. Xem tương thích trình duyệt bên dưới.
Cú pháp
Tính năng -webkit-device-pixel-ratio được chỉ định là giá trị <number>. Đây là tính nă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ố -webkit-min-device-pixel-ratio và -webkit-max-device-pixel-ratio để truy vấn các giá trị tối thiểu và tối đa, tương ứng.
Các giá trị
Triển khai
/* A unit of "dppx" is implied: */
@media (-webkit-min-device-pixel-ratio: 2) {
/* … */
}
/* It is equivalent to: */
@media (min-resolution: 2dppx) {
/* … */
}
/* Similarly: */
@media (-webkit-max-device-pixel-ratio: 2) {
/* … */
}
/* It is equivalent to: */
@media (max-resolution: 2dppx) {
/* … */
}
Ví dụ
HTML
<p>This is a test of your device's pixel density.</p>
CSS
/* Exact resolution */
@media (-webkit-device-pixel-ratio: 1) {
p {
color: red;
}
}
/* Minimum resolution */
@media (-webkit-min-device-pixel-ratio: 1.1) {
p {
font-size: 1.5em;
}
}
/* Maximum resolution */
@media (-webkit-max-device-pixel-ratio: 3) {
p {
background: yellow;
}
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Compatibility # css-media-queries-webkit-device-pixel-ratio |