View on GitHub

Notes

reference notes

Media Queries and Responsive Web Design

Media queries allow you to adapt the styling of your web projects based on the size of the user’s screen, making your websites fully responsive. While flexible layouts are essential, sometimes you need to adjust CSS values for specific screen sizes.

Media Query Syntax

The basic syntax for media queries is straightforward:

body {
  margin: 24px;
}

@media (max-width: 600px) {
  body {
    margin: 8px;
  }
}

In the above example, the margin is changed based on the screen size. For screens up to 600px wide, the margin will be 8px, and for screens larger than 600px, it will be 24px.

You can create complex shifting layouts using media queries alone, and there’s no limit to the number of media queries you can use in a single document.

Tips

Other Queries

Besides max-width, you can also use min-width, max-height, and min-height in media queries to target different screen sizes.

Limit Media Queries

While you can create numerous media queries for every screen size, it’s best to minimize their usage and rely on the natural flexibility of your layouts. Think about the devices your users will use, and consider common breakpoints:

Only add breakpoints as needed; a single mobile-centric breakpoint around 500-600px might be sufficient for many layouts.

Zooming

Zooming in on a webpage changes its effective resolution, triggering media queries based on the simulated/zoomed screen resolution. Beware of browser zoom when testing responsive designs, as it can cause confusion if breakpoints don’t trigger correctly.

Media queries can also be used to change styles based on the media type. For example, you can define styles specifically for printing:

@media print {
  /* print styles go here! */
}

This feature allows you to adjust colors and hide unnecessary elements when the page is printed.

Remember, it’s not always necessary, but it can be useful in certain cases.