CSS Media Queries - Example

CSS Media Queries - More Examples

Let's look at more examples of using media queries.

Media queries are a popular technique for passing custom style sheets to different devices.

Below is a simple example demonstrating how to change the background color of different devices:

CSS Media Queries

Example

/* Set the background color of the body to tan */
body {
  background-color: tan;
}
/* Set the background color to blue on screens less than or equal to 992 pixels */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* Set the background color to olive on screens of 600 pixels or less */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Try It Yourself

Do you want to know why we use 992px and 600px precisely? They are what we call the 'typical breakpoints' of the device. You can find more examples in our Responsive Web Design Tutorial Learn more about typical breakpoints in Chinese.

Menu media queries

In this example, we use media queries to create a responsive navigation menu that varies in different screen sizes.

Large screens:

Small screens:

Example

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar link */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* On screens with a width of 600 pixels or less, make the menu links stack instead of being side by side */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Try It Yourself

Column media queries

A common use of media queries is to create a flexible layout. In this example, we create a layout that changes between four columns, two columns, and full-width columns depending on different screen sizes:

Large screens:

Medium screens:

Small screens:

Example

/* Create four equal columns that are adjacent floats */
.column {
  float: left;
  width: 25%;
}
/* On screens with a width of 992px or less, change from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* On screens with a width of 600 pixels or less, make the columns stack instead of being side by side */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Try It Yourself

Tip:the more modern method of creating column layouts is to use CSS Flexbox (see the examples below). However, Internet Explorer 10 and earlier versions do not support it. If support for IE6-10 is required, use floats (as shown above).

To learn more about the flexbox layout module, please refer to CSS Flexbox this chapter.

To learn more about responsive web design, please refer to our Responsive Web Design Tutorial.

Example

/* Container for the flexbox */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}
/* On screens with a width of 992 pixels or less, change from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* On screens with a width of 600 pixels or less, make the columns stack instead of being side by side */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Try It Yourself

Hiding elements with media queries

Another common use of media queries is to hide elements on different screen sizes:

I will hide it on small screens.

Example

/* If the screen size is 600 pixels or smaller, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Try It Yourself

Change font size with media queries

You can also use media queries to change the font size of elements on different screen sizes:

Variable font size.

Example

/* If the screen size is more than 600 pixels, set the font size of the <div> to 80 pixels */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* If the screen size is 600px or smaller, set the font size of the <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Try It Yourself

Flexible image gallery

In this example, we use media queries along with flexbox to create a responsive image gallery:

Example

Try It Yourself

Flexible website

In this example, we use media queries along with flexbox to create a responsive website with a flexible navigation bar and flexible content.

Example

Try It Yourself

Orientation: Portrait / Landscape

Media queries can also be used to change the layout of the page based on the browser's orientation.

You can set a group of CSS properties that are only applicable when the width of the browser window is greater than its height, i.e., in landscape mode:

Example

If the orientation is in landscape mode, use a light blue background color:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Try It Yourself

Minimum width to maximum width

You can also use the max-width and min-width properties to set the minimum and maximum widths.

For example, when the browser width is between 600 and 900 pixels, change the appearance of the <div> element:

Example

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Try It Yourself

Use additional values: In the following example, we use a comma (similar to the OR operator) to add additional media queries to existing media queries:

Example

/* When the width is between 600 pixels and 900 pixels or greater than 1100 pixels, change the appearance of the <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Try It Yourself

CSS @media Reference Manual

For a complete overview of all media types and features/expressions, please see CSS Reference @media Rule.

Tip:For more knowledge about responsive web design (how to target different devices and screens) and using media query breakpoints, please read our Responsive Web Design Tutorial.