pointer
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
Đặc trưng media CSS pointer kiểm tra xem người dùng có thiết bị trỏ (như chuột) hay không, và nếu có, thì thiết bị trỏ chính đó có độ chính xác như thế nào.
Note:
Nếu bạn muốn kiểm tra độ chính xác của bất kỳ thiết bị trỏ nào, hãy dùng any-pointer thay thế.
Cú pháp
Đặc trưng pointer được chỉ định là một giá trị từ khóa chọn từ danh sách bên dưới.
Ví dụ
Ví dụ này tạo một hộp kiểm nhỏ cho người dùng có thiết bị trỏ chính xác cao và một hộp kiểm lớn cho người dùng có thiết bị trỏ kém chính xác.
HTML
html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
CSS
css
input[type="checkbox"] {
appearance: none;
border: solid;
margin: 0;
}
input[type="checkbox"]:checked {
background: gray;
}
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
border-width: 1px;
border-color: blue;
}
}
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
border-width: 2px;
border-color: red;
}
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Media Queries Level 4 # pointer |