Responsive Web Design - Media Queries

What are media queries?

Media queries are a CSS technology introduced in CSS3.

It will only be used when certain conditions are met @media Rules to reference CSS property blocks.

Example

If the browser window is 600px or smaller, the background color should be light blue:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Try It Yourself

Add breakpoints

In an earlier part of this tutorial, we made a webpage with rows and columns, but this responsive webpage did not look good on small screens.

Media queries can help you. We can add a breakpoint where some parts of the design behave differently on each side of the breakpoint.


Desktop computer

Mobile phone

Add a breakpoint at 768px using media queries:

Example

When the screen (browser window) is less than 768px, the width of each column should be 100%:

/* For desktop devices: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

Try It Yourself

Always mobile-first design

Mobile First (Mobile First) refers to designing for mobile devices first before designing for desktops or any other devices (this will make the page display faster on smaller devices).

This means we need to make some improvements in CSS.

When the width is less than 768px, we should modify the design instead of changing the width. We did this 'mobile-first' design as follows:

Example

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Try It Yourself

Another breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.


Desktop computer

Tablet

Mobile phone

For this reason, we added a media query (at 600 pixels) and added a set of new classes for devices with a resolution greater than 600 pixels but less than 768 pixels:

Example

Note that the two sets of classes are almost identical, the only difference being the name (col- and col-s-):

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

It seems strange to have two sets of similar classes, but it gives us the opportunity to use HTML to decide what happens to the columns at each breakpoint:

HTML Example

For desktops:

Both the first and third parts will span 3 columns. The middle part will span 6 columns.

For tablets:

The first part will span 3 columns, the second part will span 9 columns, and the third part will be displayed below the first two parts and will span 12 columns:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Try It Yourself

Typical device breakpoints

There are countless screens and devices with different heights and widths, so it is difficult to create precise breakpoints for each device. For simplicity, you can aim for these five groups:

Example

/* Extra small devices (phones, 600px and below) */
@media only screen and (max-width: 600px) {...} 
/* Small devices (portrait tablets and large phones, 600 pixels and above) */
@media only screen and (min-width: 600px) {...} 
/* Medium devices (landscape tablets, 768 pixels and above) */
@media only screen and (min-width: 768px) {...} 
/* Large devices (laptops/desktops, 992px and above) */
@media only screen and (min-width: 992px) {...} 
/* Extra large devices (large laptops and desktops, 1200px and above) */
@media only screen and (min-width: 1200px) {...}

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 only apply when the browser window width is greater than its height, which is known as the 'landscape' orientation:

Example

If the orientation is in landscape mode, the webpage background is light blue:

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

Try It Yourself

Hiding elements with media queries

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

Example

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

Try It Yourself

Modifying font size with media queries

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

Example

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

Try It Yourself

CSS @media Reference Manual

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