CSS Media Queries

A complete reference — responsive breakpoints, device types, orientation, and pixel density.

Responsive grid breakpoints

Desktop (default)

1280px and above

/* Base styles — no query needed */
@media all and (min-width: 1280px) { }

Large tablet

1024px – 1280px

@media all and
  (min-width: 1024px) and
  (max-width: 1280px) { }

Tablet landscape

768px – 1024px

@media all and
  (min-width: 768px) and
  (max-width: 1024px) { }

Tablet portrait

480px – 768px

@media all and
  (min-width: 480px) and
  (max-width: 768px) { }

Phone

480px and below

@media all and
  (max-width: 480px) { }

Foundation breakpoints (mobile-first)

Mobile

All screens — base styles

@media only screen { }
/* Mobile-first — always applies */

@media only screen and
  (max-width: 40em) { }
/* max 640px — mobile only */

Tablet

641px – 1024px

@media only screen and
  (min-width: 40.063em) { }
/* min 641px — medium+ */

@media only screen and
  (min-width: 40.063em) and
  (max-width: 64em) { }
/* tablet only QA range */

Desktop

1025px – 1440px

@media only screen and
  (min-width: 64.063em) { }
/* min 1025px — large screens */

@media only screen and
  (min-width: 64.063em) and
  (max-width: 90em) { }
/* desktop QA range */

XLarge

1441px – 1920px

@media only screen and
  (min-width: 90.063em) { }

@media only screen and
  (min-width: 90.063em) and
  (max-width: 120em) { }
/* XL QA range */

XXLarge

1921px and above

@media only screen and
  (min-width: 120.063em) { }
/* min 1921px */

Orientation

Portrait

Height > width

@media screen and
  (orientation: portrait) { }

Applies when the device is held vertically.

Landscape

Width > height

@media screen and
  (orientation: landscape) { }

Applies when the device is held horizontally.

Pixel density (retina)

Standard display

1× pixel density

@media screen and
  (-webkit-max-device-pixel-ratio: 1) { }

Retina / HiDPI

1.5× and above

@media only screen and
  (-webkit-min-device-pixel-ratio: 1.5),
only screen and
  (min-device-pixel-ratio: 1.5) { }
/* Use 2× assets here */

Device-specific (iOS)

iPhone portrait

max-width 480px + portrait

@media screen and
  (max-device-width: 480px) and
  (orientation: portrait) { }

iPhone landscape

max-width 480px + landscape

@media screen and
  (max-device-width: 480px) and
  (orientation: landscape) { }

iPad portrait

min-width 481px + portrait

@media screen and
  (min-device-width: 481px) and
  (orientation: portrait) { }

iPad landscape

min-width 481px + landscape

@media screen and
  (min-device-width: 481px) and
  (orientation: landscape) { }

Viewport meta tag

Required in <head>

Prevents mobile browsers from zooming out to fit desktop layout

<meta name="viewport"
     content="width=device-width,
              initial-scale=1,
              maximum-scale=1,
              user-scalable=no" />

Note: setting user-scalable=no disables pinch-to-zoom — consider accessibility before using it.

CSS Media Queries reference documentation cards

CSS Media Queries