任何指针 | @media.any-pointer
@media.any-pointer
任何指针式的CSS @media媒体功能都可以根据是否有可用的input机制来应用样式，如果是的话，它是非常精确的。
语法
大any-pointer功能指定为从下面列表中选择的关键字值。
none没有指向设备可用。
注：如果可用设备具有不同的特性，则可以匹配多个值，尽管none只有当它们都没有指向设备时才匹配。
例子
HTML
<input id="test" type="checkbox" />
<label for="test">Look at me!</label>
CSS
input[type="checkbox"]:checked {
background: gray;
}
@media (any-pointer: fine) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| Media Queries Level 4The definition of 'any-pointer' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 41 | No support2 | 20 or earlier (12) | Nightly build | 28 | 9 1 |
| Feature | Android | Chrome for Andorid | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | No support | 50 | No support2 | 36 | ? | 9.2 |
