How Do You Write CSS Media Queries?

The syntax for both min-width and max-width media queries

Format
mla apa chicago
Your Citation
Girard, Jeremy. "How Do You Write CSS Media Queries?" ThoughtCo, Jan. 24, 2017, thoughtco.com/how-do-you-write-css-media-queries-3469990. Girard, Jeremy. (2017, January 24). How Do You Write CSS Media Queries? Retrieved from https://www.thoughtco.com/how-do-you-write-css-media-queries-3469990 Girard, Jeremy. "How Do You Write CSS Media Queries?" ThoughtCo. https://www.thoughtco.com/how-do-you-write-css-media-queries-3469990 (accessed September 21, 2017).

Responsive web design is an approach to building webpages where those pages can dynamically change their layout and appearance based on a visitor’s screen size. Large screens can receive a layout suited to those larger displays while smaller devices, like mobile phones, can 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.

An important part of responsive web design is CSS Media Queries.

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

Media Queries in Action

So how do you use Media Queries on a website? Here is a very simple example:

  1. You would start with a well-structured HTML document free of any visual styles (that is what CSS is for)
     
  2. In your CSS file, you would start as you normally do by styling the page and setting a baseline for how the website will look. Say you wanted the font size of the page to be 16 pixels, you could write this CSS:
        body {
        font-size: 16px;
        }
        
  3. Now, you may want to increase that font size for larger screens that have ample real estate to do so. This is where Media Queries kick in. You would start a Media Query like this:
        @media screen and (min-width: 1000px) {
        
        }
  1. This is the syntax of a Media Query. It starts with @media to establish the Media Query itself. Next you set the "media type", which in this case is "screen". This applies to desktop computer screens, tablets, phones, etc. Finally, you end the Media Query with the "media feature". In our example above, that is "mid-width: 1000px". This means that the Media Query will kick in for displays with a minimum width of 1000 pixels wide.
     
  1. After these elements of the Media Query, you add an opening and closing curly brace similar to what you would do in any normal CSS rule.
     
  2. The final step to a Media Query is to add the CSS rules that you want to apply once this condition is met. You add 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;
        }
      
  3. When the conditions of the Media Query are met (the browser window is at least 1000 pixels wide), this CSS style will take effect, changing our site’s font size from the 16 pixels we established originally to our new value of 20 pixels.

Adding More Styles

You could place as many CSS rules within this Media Query as needed to adjust your website’s visual appearance. For instance, if you wanted to not only increase the font-size to 20 pixels, but also change the color of all paragraphs to black (#000000), you could 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, adding them to your style 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 would 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. You could 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 causes the Media Queries to take effect once a browser has reached at least that minimum width. So a query that uses "min-width: 1000px" will apply 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" would apply once the browser has fallen below this size.

Regarding Older Browsers  

One challenge with Media Queries is their lack of support in older versions on Internet Explorer. Thankfully, there are polyfills available that can patch support for Media Queries in those older browsers, allowing you to use them on websites today while still ensuring that the display of that site does not look broken in older browser software.

Edited by Jeremy Girard on 1/24/17