CSS 媒体功能 - any-pointer

CSS 媒体功能 any-pointer 用于检测是否存在任何可用于指向元素（如鼠标、触笔或触摸屏）的输入机制。它允许您根据用户正在使用的定点设备类型对元素应用不同的样式或行为。

这对于创建适应用户输入方法的响应式设计非常有用。

可能的值

none − 此值表示没有可用的指针设备。换句话说，用户的设备没有任何用于指向的输入机制，这种情况非常罕见。
coarse - 这表明设备至少有一个能够指向元素的输入机制，但它可能不是很准确，例如触摸屏。粗糙的设备通常缺乏鼠标或触控笔的精度。
fine − 此值表示存在可用的指针设备，并且是精度更高的精细设备，例如鼠标或触控笔。

语法


any-hover: none|coarse|fine;

CSS any-pointer - none 值

以下示例演示了当用户将鼠标悬停在按钮上时，媒体功能 any-pointer： none 不会更改光标 -


<html>
<head>
<style>
	 	button{
	 	 	 padding: 5px;
	 	 	 background-color: yellow;
	 	 	 border: none
	 	}
	 	@media (any-pointer: none) {
	 	 	 button:hover {
	 	 	 	 	background-color: pink;	
	 	 	 	 	border: 2px solid red;
	 	 	 	 	cursor: pointer;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>When the user hovers over the paragraph the cursor will not change.</p>
	 	<button>any-pointer: none</p>
</body>
</html>

CSS any-pointer - coarse 值

以下示例演示如何使用 any-pointer： coarse 媒体功能在触摸屏等设备上以不同的方式设置段落样式 -


<html>
<head>
<style>
	 	.content {
	 	 	 padding: 5px;
	 	 	 background-color: yellow;
	 	}
	 	@media (any-pointer: coarse) {
	 	 	 .content:hover {
	 	 	 	 	background-color: pink;	
	 	 	 	 	border: 2px solid red;
	 	 	 	 	cursor: pointer;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="content">
	 	 	 <h3>any-pointer: coarse Example</h3>
	 	 	 <p>When the user hovers over the paragraph the cursor will change.</p>
	 	</div>
</body>
</html>

CSS any-pointer - fine 值

以下示例演示了当用户将鼠标悬停在参数上时，媒体功能 any-pointer： fine 将更改光标 -


<html>
<head>
<style>
	 	.content {
	 	 	 padding: 5px;
	 	 	 background-color: yellow;
	 	}
	 	@media (any-pointer: fine) {
	 	 	 .content:hover {
	 	 	 	 	background-color: pink;	
	 	 	 	 	border: 2px solid red;
	 	 	 	 	cursor: pointer;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="content">
	 	 	 <h3>any-pointer: fine Example</h3>
	 	 	 <p>When the user hovers over the paragraph the cursor will change.</p>
	 	</div>
</body>
</html>

打印本页