pointer

Baseline 已广泛支持

此功能已成熟，并可在许多设备和浏览器版本上运行。自 2018 年 12 月起，所有浏览器均支持此功能。

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 级 # pointer

浏览器兼容性

另见

any-pointer 媒体特性

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题