CSS 媒體特性 - 指標

CSS 媒體特性pointer 檢查使用者是否擁有可用於指向和點選的指向裝置，例如滑鼠或觸控式螢幕。

可能的值

none - 此值表示使用者沒有指向裝置，例如滑鼠或觸控式螢幕。
coarse - 此值表示使用者擁有指向精度不高的指向裝置，例如觸控式螢幕上的手指。
fine - 此值表示使用者擁有指向精度很高的指向裝置，例如滑鼠。

語法

pointer: none|coarse|fine;

CSS 媒體特性any-pointer 可用於測試任何指向裝置的精度。

CSS pointer - coarse 值

以下示例演示瞭如何使用 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 pointer - fine 值

以下示例演示了使用媒體特性 pointer: fine 在使用者使用精細指向裝置懸停在 p 元素上時更改元素外觀的方法，背景顏色將更改為黃色，並且會新增紅色邊框。

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

列印頁面