Understanding Media Queries in CSS

A media query should appear because the content or interaction has reached a constraint, not because a device‑width list says it is time for another breakpoint. Start with the base layout, resize it, and add a condition where the design genuinely needs to change.

What are Media Queries?

Media queries are conditional rules in CSS that apply styles only if specific criteria are met, such as screen width, height, or orientation. They allow us to adapt our website's layout and appearance to different devices without needing separate codebases.

The basic syntax of a media query looks something like this:

@media (condition) {
  /* Styles to apply if the condition is true */
}

For example, we could use a media query to apply styles to screens that are wider than 768 pixels like this:

@media (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Here, a light blue background will only be applied to body if the viewport width is 768 pixels or more.

How Media Queries are Used

Media queries are commonly used to create responsive layouts. They let us adjust styles to the available viewport space, then check that the result works with the page's real content and interactions.

Here's a simple example of a responsive layout:

/* Default styles */
body {
  font-size: 16px;
}

/* Adjust for tablets */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Adjust for desktops */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

In this example:

• Below 600px, the font size remains 16px.
• At viewport widths of 600px and above, the font size increases to 18px.
• At viewport widths of 1024px and above, the font size becomes 20px.

Of course, there are any number of different ways to implement responsive typography, but as an example of media queries, this hopefully demonstrates how their flexibility allows us to build responsive designs.

Mobile‑First vs. Desktop‑First

When working with media queries, the order and intent of your styles and how they are applied matter. This is where the debate between mobile‑first and desktop‑first design comes in.

Mobile‑First

In a mobile‑first approach, the default styles are optimised for smaller screens. Media queries are then used to progressively enhance the design for larger screens.

For example:

/* Default styles for mobile */
body {
  font-size: 16px;
}

/* Larger screens */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Desktop‑First

In a desktop‑first approach, the default styles target larger screens. Media queries are then used to modify the design downwards for smaller devices. For example:

/* Default styles for desktop */
body {
  font-size: 20px;
}

/* Smaller screens */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

Comparing the Two

Mobile‑first and desktop‑first organise the default rules and the conditions that override them. In the examples above, the browser still receives the whole stylesheet, including rules whose media queries do not currently match. Starting with smaller‑screen styles does not mean downloading only those rules or guarantee a smaller transfer. Viewport width also tells us nothing certain about the device's processing power or connection speed.

I generally prefer to start with the smaller layout because it makes me decide what the content needs before adding more columns or space. That is a useful design discipline. Performance and accessibility still depend on the assets, markup, interactions and testing, whichever direction the media queries take.

Wrapping Up

Key Takeaways

• Media queries apply styles conditionally based on device characteristics like screen width or orientation.
• They are integral to responsive design, helping websites adapt to different devices.
• Mobile‑first design focuses on smaller screens by default, whilst desktop‑first starts with larger screens.

Write the base rules for the simplest layout, then add a media query when the content needs a different arrangement. Choose breakpoints from the component or page rather than a list of fashionable device widths. Media queries should respond to an actual constraint, not recreate a separate design for every screen size.