pointer media feature

Describes the existence and accuracy of a pointing device like a stylus or a mouse.

Possible values

  • Name: pointer
  • For: @media
  • Value: none | coarse| fine
  • Type: discrete

One of the following values.

ValueDescription

none

Indicates the height of the targeted display area is greater than or equal to its width.

coarse

Indicates the height of the targeted display area is less than its width.

fine

Indicates the height of the targeted display area is less than its width.

 

Examples

The following example will make a specific class larger if a pointing device with limited accuracy is present.



@media (pointer: coarse) {
   .button {
      min-width: 100px; 
      min-height: 50px;
   }
}

 

 

Show: