How Do You Write a CSS Media Query?

Know the syntax for both min-width and max-width media queries

CSS logo

Responsive web design is an approach to building web pages where those pages can dynamically change their layout and appearance based on a visitor’s screen size. Large screens receive a layout suited to those larger displays while smaller devices, like mobile phones, receive the same website formatted in a manner that is suitable for that smaller screen. This approach provides a better user experience for all users and it can even help improve search engine rankings. CSS Media Queries constitute an important part of responsive web design.

Media Queries are like little conditional statements inside your website’s CSS file, allowing you to set certain CSS rules that will only take effect once a certain condition is met—like when a screen size is above or below certain thresholds.

Media Queries are now standard, but very old versions of Internet Explorer do not support them.

Media Queries in Action

Start with a well-structured HTML document free of any visual styles.

In your CSS file, style the page and set a baseline for how the website will look. To render the font size of the page to be 16 pixels, write this CSS:

 body { font-size: 16px; } 

To increase that font size for larger screens that have ample real estate to do so, start a Media Query like this:

 @media screen and (min-width: 1000px) { }

This is the syntax of a Media Query. It starts with @media to establish the Media Query itself. Next, set the media type, which in this case is screen. This type applies to desktop computer screens, tablets, phones, etc. End the Media Query with the media feature. In our example above, that is mid-width: 1000px. This means that the Media Query kicks in for displays with a minimum width of 1000 pixels wide.

After these elements of the Media Query, add an opening and closing curly brace similar to what you would do in any normal CSS rule.

The final step to a Media Query is to add the CSS rules to apply after this condition is met. Insert these CSS rules between the curly braces that make up the Media Query, like this:

 @media screen and (min-width: 1000px) { body { font-size: 20px; } 

When the conditions of the Media Query are met (the browser window is at least 1000 pixels wide), this CSS style takes effect, changing our site’s font size from the 16 pixels we established originally to our new value of 20 pixels.

Adding More Styles

Place as many CSS rules within this Media Query as needed to adjust your website’s visual appearance. For example, to not only increase the font size to 20 pixels, but also change the color of all paragraphs to black (#000000), add this:

@media screen and (min-width: 1000px) {
body {
font-size: 20px;
}

p {
color: #000000;
}
}

Adding More Media Queries

Additionally, you can add more Media Queries for every larger sizes, inserting them into your styles sheet like this:

@media screen and (min-width: 1000px) {
body {
font-size: 20px;
}

p {
color: #000000;
{
}

@media screen and (min-width: 1400px) {
body {
font-size: 24px;
}
}

The first Media Queries kick in at 1000 pixels wide, changing the font size to 20 pixels. Then, once the browser was above 1400 pixels, the font size would change again to 24 pixels. Add as many Media Queries as needed for your particular website.

Min-Width and Max-Width

There are generally two ways to write Media Queries—by using min-width or with max-width. So far, we have seen min-width in action. This approach activates Media Queries after a browser reaches at least that minimum width. So a query that uses min-width: 1000px applies when the browser is at least 1000 pixels wide. This style of Media Query is used when you are building a site in a mobile-first manner.

If you use max-width, it works in the opposite manner. A Media Query of "max-width: 1000px" applies after the browser has fallen below this size.