CSS 媒体功能 Pointer 检查用户是否有可用于指向和单击的指针设备,例如鼠标或触摸屏。
可能的值
- none − 此值表示用户没有指针设备,例如鼠标或触摸屏。
- coarse − 此值表示用户的指针设备不是很准确,例如触摸屏上的手指。
- fine − 此值表示用户具有非常准确的指针设备,例如鼠标。
语法
pointer: none|coarse|fine;
CSS 媒体特性 any-pointer 可用于测试任何指针设备的准确性。
CSS 指针 - 粗略值
以下示例演示如何使用 CSS 媒体功能 pointer:coarse 在具有粗略指针设备的设备(如触摸屏)上更改段落元素的样式 -
在移动设备或触摸屏设备上测试示例。
<html>
<head>
<style>
p {
background-color: pink;
}
@media (pointer: coarse) {
p:hover {
background-color: yellow;
border: 2px solid red;
}
}
</style>
</head>
<body>
<p>CSS pointer: coarse Example</p>
</body>
</html>
CSS 指针 - fine Value
以下示例演示了媒体功能 pointer: fine 的使用,当用户使用精细指针设备将鼠标悬停在 pelement 上时,可以更改元素的外观,背景颜色将变为黄色,并添加红色边框。
<html>
<head>
<style>
p {
background-color: pink;
}
@media (pointer: fine) {
p:hover {
background-color: yellow;
border: 2px solid red;
}
}
</style>
</head>
<body>
<p>CSS pointer: fine Example</p>
</body>
</html>