指针和指针的指针_指针媒体查询

指针和指针的指针

This media query has not yet been implemented and is currently only a proposed spec. I've written this post to raise awareness of it and get general thoughts about it.

该媒体查询尚未实现，目前仅是建议的规格。 我写这篇文章是为了提高对此的认识并获得有关它的一般想法。

As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.  One new proposed CSS media query is the pointer media query;  the pointer media query provides information about how accurate the device pointer is (if present).

随着更多设备的出现和设备交互作用的实现，更重要的优质CSS代码将变得越来越重要。 为了编写好CSS，我们需要一些有关设备功能的指标。 到目前为止，我们已经使用CSS媒体查询来检查最大宽度和像素比率。 一种新提出的 CSS媒体查询是指针媒体查询 ; 指针媒体查询提供有关设备指针的准确性(如果存在)的信息。

The pointer media query has three values:

指针媒体查询具有三个值：

• none - device has no pointer

  none -设备没有指针

• coarse - pointer has limited accuracy

  coarse -指针精度有限

• fine - pointer has high level of accuracy

  fine -指针具有很高的准确性

A fine pointer would be a mouse or a stylus-based touch screen, while a coarse pointer would be a finger-based touch screen, like an iPad, iPhone, or other tablet.  The example provided within the spec shows enlarging checkboxes and radio buttons on coarse-pointered devices:

细指针将是鼠标或基于触控笔的触摸屏，而粗指针将是基于手指的触摸屏，例如iPad，iPhone或其他平板电脑。 规范中提供的示例显示了在粗指针设备上放大的复选框和单选按钮：

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
	input[type="checkbox"], input[type="radio"] {
		min-width:30px;
		min-height:40px;
		background:transparent;
	}
}

View Demo 观看演示

I envision this API being used to enlarge navigation items and other prominent links when the pointer is coarse.  What would you do with the pointer media query?

我预想该API将在指针粗糙时用于放大导航项和其他突出链接。 指针媒体查询将如何处理？

翻译自: https://davidwalsh.name/pointer-media-query

指针和指针的指针