CSS pointer Media Feature

Definition and Usage

The pointer media feature tests whether the user has a primary pointing device, and how accurate it is: fine (mouse), coarse (finger), or none.

Use it to size tap targets and controls for the main input method. To test any pointing device (not only the primary one), use any-pointer instead.

CSS Syntax

Put UI rules inside the query that matches the primary pointer you want to design for.

Feature Values

How to Use pointer

Start with usable defaults, then enlarge for coarse pointers.

1. Ship comfortable default hit areas for all users.
2. Add @media (pointer: coarse) to increase padding or control size on touch-primary devices.
3. Optionally tighten dense UI under (pointer: fine)—without going too small.
4. Use any-pointer when a secondary mouse or stylus should also count.

Live Preview

This browser’s current match for pointer (via matchMedia).

CSS Examples

Each snippet focuses on pointer. Use Try It Yourself for a live editor.

<style>
  button {
    padding: 0.5em 1em;
  }

  @media (pointer: coarse) {
    button {
      padding: 1em 2em;
    }
  }
</style>

<button type="button">Save</button>

<style>
  button {
    padding: 0.75em 1.25em;
  }

  @media (pointer: fine) {
    button {
      padding: 0.4em 0.8em;
    }
  }
</style>

<button type="button">Edit</button>

<style>
  input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
  }

  @media (pointer: fine) {
    input[type="checkbox"] {
      width: 0.9rem;
      height: 0.9rem;
    }
  }

  @media (pointer: coarse) {
    input[type="checkbox"] {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
</style>

<label><input type="checkbox"> Remember me</label>

Key Takeaways