Tablet-Only Range Query (768px-1023px)

Targeting Tablets Only with a Range Query

Sometimes tablets need styles that are distinct from both phones and desktops. You can combine min-width and max-width with the and operator to create a range:

The Query

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Tablet-only styles */
}

Why Use a Range?

In a pure mobile-first approach, tablet styles set at min-width: 768px carry forward to desktop. If the desktop layout is fundamentally different (not just wider), you may need to undo tablet-specific rules. A range query avoids this by scoping styles to exactly the tablet window.

Modern CSS Range Syntax

The CSS Media Queries Level 4 specification introduces a cleaner range syntax:

@media (768px <= width < 1024px) {
  /* Tablet-only */
}

Browser support for this syntax is growing but may not cover older browsers. The traditional min-width + max-width approach remains the safest option.

Example

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .nav { flex-direction: column; }
  .sidebar { display: none; }
  .main { grid-template-columns: 1fr 1fr; }
}

This hides the sidebar and uses a two-column grid only on tablets, without affecting the phone or desktop layout.