Published on

How to Use Media Queries

Authors
  • avatar
    Name
    Chris
    Twitter

Some elements on a web page may appear correct regardless of the viewing device or browser-width but others may need to be styled differently for them. Styling elements different based on the user's device or viewport is a part of Responsive Development and involves media queries.

Media Queries are CSS rules that restrict CSS styles to only style elements for the viewports they describe. A viewport is the user's visible area of a web page. For example, a media query can contain styles that apply only when the viewport is less than a certain width, between certain widths or at least a certain width. These browser-width specific at rules allow you to control which styles are applied to an element at different browser widths.

First, what are CSS selector declarations?

CSS Selector declarations declare how an element should be displayed. For example, if we want to show all h1 elements in red, we could declare the following in the stylesheet:

  h1 {
    color: red;
  }

The result would be that all h1 elements would be colored red. Now, let's say that we want the h1 elements to be green when viewed on a vertical tablet or larger. We would use a browser width-specific selector declaration. Because we are being more specific, the browser width-specific declaration prevails over the general declaration.

What are media queries?

Media Queries are the CSS at-rules and the styles intended to be applied when the at-rule is satisfied. For a browser-width at-rule, the media query is the CSS at-rule and the CSS styles that apply for that rule. Wrapping the styles in the CSS at-rule restricts those styles to apply only when the at-rule is satisfied. Media queries can have at rules that target pixel density, screen or print, ranges of browser-widths and more. Here's how to do it:

How to use a media query?

For our example, we care about a range of browser widths. We could have h1 elements display in green at vertical tablet size and above by adding the following:

@media (min-width: 768px) {
  h1 {
    color: green;
  }
}

The result is that on devices narrower than 768px, only the general style applies so the h1 will be displayed red. But, on vertical tablets and above, the at rule of min-width 768px is satisfied so the contained CSS style will display the h1 element in green.

What's the best practice for using browser width-specific declarations?

If we just use the code examples above, all major browsers load the general declaration then for browser-widths matching the CSS at-rule, override the general declaration. We can avoid overriding general declarations by restricting all browser-width displays to their own declarations, like this:

@media (max-width: 767px) {
  h1 {color: red;}
}
@media (min-width: 768px) {
  h1 {
    color: green;
  }
}

The resut is that a browser with a width narrower than vertical tablet will only style the h1 with the 1syt declaration, while browsers with a width of vertical tablet or larger will only style the h1 with the 2nd declaration.

Should we specify all browser-width specific styles in media queries?

In short, not always. Even though separating the styles for different viewports avoids overriding more general styles, avoiding overriding isn't more important than performance.

How should media queries be written for performance optimization?

The Mobile First web development principle means building for mobile first, then adding additional features as device strength and connectivity strength increase. In this case, the general selector should be the one that applies to the mobile devices, then overrides for larger devices that have, at least in theory, greater processing power and a greater probability of being connected through wifi. Here's how:

h1 {
  color: red;
}
@media (min-width: 768px) {
  h1 {
    color: green;
  }
}

Notice that the h1 is declarad red, then an overriding CSS at rule provides that at a minimum width of vertical tablet, the h1 should be styled green. This code does not prevent styles from being overriden, but it does make less code. And less code means less loading time and so a more performant website. That's the point of mobile first.

How to use media queries for a range of browser-widths?

To have a media query apply only to a range of browser-widths, a CSS at-rule can declare a minimum and a maximum width. If we applied this with 3 related CSS at-rues, we could style a selector differently for the lower end, the middle range and the upper end. Here's how:

h1 {
  color: red;
}
@media (min-width: 768px) and (max-width: 1024px) {
  h1 {
    color: yellow;
  }
}
@media (min width: 1025px) {
  h1 {
    color: green;
  }
}

Here, the effect is that on viewports that only satisfy the general declaration; i.e., have a browser-width less than 786px, the h1 will be displayed red. For the middle declaration, between tablet vertical and horizontal, the h1 will be displayed yellow. For devices larger with a viewport of at least 1025px, the h1 will be displayed green.

A few notes:

  • Keep it organized. Keep styles and media queries for the same selector together.
  • Keep it clean. Be systematic in applying media queries.
  • Pay attention the breakpoints. A min-width of 1023px will apply to a vertical tablet and not a landscape one. A min-width of 1024px will also apply to the tablet.

I'm developing a custom theme almost every day, so I'm creating and optimizing media queries all the time. If you'd like help with your project, please send me a message vy clicking the email icon at the bottom of the page.

Discuss on Twitter