指针

**pointer** CSS 媒体特性 测试用户是否拥有指向设备(如鼠标),如果有,则测试*主要*指向设备的精度。

**注意:**如果要测试*任何*指向设备的精度,请改用 any-pointer

语法

pointer 特性指定为从以下列表中选择的关键字值。

none

主要输入机制不包含指向设备。

coarse

主要输入机制包含精度有限的指向设备,例如触摸屏上的手指。

fine

主要输入机制包含精确的指向设备,例如鼠标。

示例

此示例为具有精细主要指针的用户创建一个小的复选框,为具有粗略主要指针的用户创建一个大的复选框。

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;
  }
}

结果

规范

规范
媒体查询级别 4
# 指针

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅