Skip to content
Search

Media queries

lastmod 2023-03-14created 2022-09-294 edits

Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution (e.g. mobile and desktop screen size). It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design (RWD).

Mobile First

The min-width media query is often used with mobile first design in mind. This means your base styles are for smaller screens and you place styles for larger displays inside the media query. 

@media (min-width: 768px) {
}

Light/Dark Mode

The prefers-color-scheme media query can be useful for automated light/dark mode support. If set to light and the user's system settings are also set to light, the nested styles will apply. Vice-versa when set to dark. 

@media (prefers-color-scheme: light) {
}

Reduce Motion

The prefers-reduced-motion media query is an essential tool when coding for accessibility. Features like animation can trigger motion sickess or be overly distracting to the visually impaired. This query will honour a user's browser or operating system settings around reducing motion. 

@media (prefers-reduced-motion: reduce) {
  * {
      animation: none !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
  }
}

No Touchy Hover

Have a cool hover effect but find it annoying when the style activates on touch screen press? You could use an arbitrary min-width query but that's not guaranteed to cover all cases. Introducing the lesser known hover media query as a dedicated place for hover styles. They'll only activate where hover support is detected - how cool! 

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: white;
    background: rebeccapurple;
  }
}

The In-between

Combining media query options is powerful. For example, by combining min-width and max-width in a query, we can specify styles that we want to apply only between two values. 

@media (min-width: 30em) and (max-width: 60em) {
}

Device Orientation

The orientation media query gives us a way to trigger different styles when a device such as a smartphone or tablet has been rotated. There are only two options: either landscape or portrait. 

@media (orientation: landscape) {
}

Ever print out a page and quickly realise your mistake as your ink slowly drains away? That site could have used a print media query. With this media type you can set styles for what is printed. For example, hiding images or providing a print-friendly article layout versus the digital version. 

@media print {
}

See also

Favorite site

Tutorials

author Zer0 sitemap