Media Queries

CSS Media Queries

CSS media queries allow styles to change when certain conditions are met. They are commonly used to adapt page layouts to different viewport widths, making them an important part of responsive web design.

What are Media Queries?

Media queries allow CSS rules to be applied only when specified conditions are true. A common condition is the width of the browser viewport.

For example, a page can display several columns on a wide screen and switch to a single-column layout when the viewport becomes narrower.

The @media Rule

A media query begins with the CSS @media rule followed by one or more conditions. The CSS inside the rule is applied when those conditions match.

@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

In this example, the padding is set to 10 pixels when the viewport is 600 pixels wide or narrower.

Using max-width

The max-width media feature can apply styles when the viewport is at or below a specified width.

@media (max-width: 768px) {
  .navigation {
    display: block;
  }
}

This rule applies when the viewport width is 768 pixels or less. It can be useful when changing an existing layout for narrower screens.

Using min-width

The min-width media feature can apply styles when the viewport is at or above a specified width.

@media (min-width: 768px) {
  .container {
    display: flex;
  }
}

This approach is commonly used with mobile-first CSS. Basic styles are written for smaller screens first, and additional layout rules are added as more space becomes available.

Responsive Breakpoints

A breakpoint is a point where a media query changes the page's styling or layout. Breakpoints are commonly based on viewport width.

@media (min-width: 600px) {
  /* Styles for wider viewports */
}

@media (min-width: 900px) {
  /* Styles for still wider viewports */
}

There is no single set of breakpoint widths that every website must use. Breakpoints should be chosen where the content or layout needs to change to remain readable and usable.

Combining Conditions

Media query conditions can be combined with the and keyword.

@media (min-width: 600px) and (max-width: 900px) {
  .container {
    padding: 20px;
  }
}

This CSS applies when the viewport width is at least 600 pixels and no more than 900 pixels.

Media Types

Media queries can also target media types. The most commonly encountered types are screen, print, and all.

@media print {
  .navigation {
    display: none;
  }
}

This example hides the navigation when the page is printed. For responsive screen layouts, specifying screen is often unnecessary because a query can simply test the required media features.

Changing Layout with Media Queries

Media queries are often combined with Flexbox or Grid to change a layout as the available width changes.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

The cards use one column by default. When the viewport reaches 700 pixels, the layout changes to three columns.

Try Media Queries

Drag the divider between the code and result panes to change the preview width. Watch how the layout changes when the preview crosses the media query breakpoint.

Using Media Queries Effectively

Media queries are most useful when they respond to the needs of the content rather than attempting to target every individual device. Start with a layout that works at smaller widths, then add breakpoints where additional space allows the layout to improve.

Flexible widths, Flexbox, and Grid can often adapt to changing space without a media query. Use media queries when the layout or styling needs a specific change at a particular range of sizes.

Summary

CSS media queries apply styles when specified conditions are met. The @media rule can test features such as viewport width, while min-width and max-width are commonly used to create responsive breakpoints. Media queries can work with Flexbox, Grid, and other CSS to adapt a page to different available sizes.

The next tutorial covers Responsive Web Design and brings together flexible layouts, media queries, images, and viewport settings to create pages that work across different screen sizes.