Little Known
CSS Basics Media (& Other) Queries

Responsive Sites and
Accessibility Wins

What Are CSS Queries?


… that scope parts of your CSS

… based on device data

Media Queries: Syntax


  media="screen and (min-width: 16em)"
  href="example.css" />

CSS At-Media

@media screen and (min-width: 16em) {
  /* example css */

CSS At-Import

@import url(example.css)
  screen and (min-width: 16em);

CSS At-Document

@document url( {
  /* custom CSS for */


Preprocessors, PostCSS, and some CSS-in-JS tools allow you to nest a query inside a selector block.

.selector {
  @media (min-width: 36em) {
    /* CSS */

Media Query Options

screen and (min-width: 16em)

media type: screen

media feature: (min-width: 16em)

Media Types

(Useful Ones)

  • all
  • screen
  • print
  • speech

Media Types

(Deprecated Ones)

  • braille
  • embossed
  • projection
  • handheld
  • tv
  • tty
  • aural

Media Features

Some key-value pairs

Some keyword-only

Media Features: Screen Width

  • width
  • min-width
  • max-width
  • device-width πŸ‘Ž
  • min-device-width πŸ‘Ž
  • max-device-width πŸ‘Ž

Example: Screen Width

.card {
  width: 100%;
@media (min-width: 45em) {
  .card {
    width: 50%;

Media Features: Screen Height

  • height
  • min-height
  • max-height
  • device-height πŸ‘Ž
  • min-device-height πŸ‘Ž
  • max-device-height πŸ‘Ž

Example: Screen Height

.nav {
  height: 120px;
@media (max-height: 40em) {
  .nav {
    height: 70px;

Media Features: Resolution

  • resolution
  • min-resolution
  • max-resolution
  • -webkit-device-pixel-ratio πŸ‘Ž

Example: Resolution

.picture {
  background-image: url(pic-1x.jpg);
@media (min-resolution: 150dpi) {
  .picture {
    background-image: url(pic-2x.jpg);

Media Features: Orientation

  • portrait
  • landscape

Media Features: Aspect Ratio

  • aspect-ratio
  • min-aspect-ratio
  • max-aspect-ratio
  • device-aspect-ratio πŸ‘Ž
  • min-device-aspect-ratio πŸ‘Ž
  • max-device-aspect-ratio πŸ‘Ž

Example: Aspect Ratio

.media--16-9 {
  height: 100vh;
  width: 177.778vh;
@media (min-aspect-ratio: 16/9) {
  .media--16-9 {
    height: 56.25vw;
    width: 100vw;


Media Features: Color

  • color (boolean)
  • color-index (integer)
  • min-color-index (integer)
  • max-color-index (integer)
  • monochrome (boolean)
  • min-monochrome (integer)
  • max-monochrome (integer)
  • color-gamut (keyword):
    srgb, p3, rec2020

Example: Color

a {
  color: #304FFE; /* custom blue */
  text-decoration: none;
@media (monochrome) {
  a {
    text-decoration: underline;

Media Features: Scan

  • progressive
  • interlace

Just for television sets

Media Features: Grid

  • grid (1 || 0)

Screen is bitmap or grid layout

Media Features: Future

  • inverted-colors
  • pointer
  • hover
  • any-pointer
  • any-hover
  • light-level
  • scripting

Media Queries: Combinations


  • and
  • not
  • only
  • , (or)
  • () (group logic)

Operators: Examples

@media screen and (min-width: 36em) { }
@media not screen { }
@media only screen and (min-width: 36em) { }
@media print, (monochrome) { }
@media ((min-width: 36em)
  and (aspect-ratio: portrait)),
((max-width: 35.9375em)
  and (aspect-ratio: landscape)) { }

Media Queries: Advice

Size: Min vs. Max

Pick a direction and stick with it (as much as possible).

Start small and override up.

Size: Units

em is most consistent with user/browser zoom

px is “easiest” if you’re mixing min and max

Choosing Breakpoints

As much as you can, use the same set of limited breakpoints.

Let your content decide where breakpoints go.

Adjust your browser size to the point where your content breaks.

That’s a breakpoint.

Choosing Breakpoints

Don’t pick breakpoints based on specific device sizes; put breakpoints in the gaps between clusters of common device sizes.

Some components will need a breakpoint that’s not one of your “major” breakpoints: create tweakpoint for that component.

Not Choosing Breakpoints

Watch for a future talk about creating responsive components without media queries!

Someday container queries might be a thing, but that day is not yet on the calendar.

Media Queries in JavaScript


var mq = matchMedia("(min-width: 36em)");
if (mq.matches) {
  // do some code specific to that breakpoint

Media Queries in JavaScript


var mq = matchMedia("(min-width: 36em)");
function mqTriggeredFunction(event) {
  if (event.matches) {
    // do some code specific to that breakpoint

Feature (Supports) Queries

The Old Way


Load a JS file that tests for all the conditions/features you need then adds a class to `html` so you can scope CSS selectors.


@supports (display: grid) {
  display: grid;

Accepts CSS property-value pair: the browser evaluates both the property and the value.


(display: grid) and (filter: blur(3px))
(display: grid) or (filter: blur(3px))

Detect New Properties

@supports (grid-gap: 20px) {
  /* Grid styles */

Detect New Values

@supports (margin: env(safe-area-inset-left)) {
  /* iPhone X styles */

Browser Support

All modern browsers but IE support feature queries.

@supports (top: 0) {
  /* Code for not-IE browsers */

Feature Queries: Advice

Use them when you can do something with new CSS… that requires you to change properties in your fallback/original CSS.


James Steinbach

UX Developer at DockYard


Twitter | Github | Blog