WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Responsive Web Design - Media Queries


What is a Media Query?

Using the @media query, you can define different styles for different media types.

Example

If the browser window is smaller than 500px, the background will turn light blue:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
Try it yourself »

Add breakpoint

In the previous tutorial we used rows and columns to make a web page. It is responsive, but it cannot be displayed on a small screen.

Media queries can help us solve this problem. We can add breakpoints in the middle of the design draft. Different breakpoints have different effects.


Desktop device

Mobile device

Use media queries to add breakpoints at 768px:

Example

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

/* 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%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

Try it yourself »

Always Design for Mobile First

Mobile-first means giving priority to mobile design when designing desktops and other devices.

This means we have to make some changes to CSS.

We modify the style when the screen is less than 768px. We also need to modify the style when the screen width is greater than 768px. Here are mobile-first examples:

Example

/* Designed for mobile: */
[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 breakpoints according to your needs.

We can also set breakpoints for tablet and mobile phone devices.

Desktop devices


Work area

Tablet

Telephone

Add a media query when the screen is 600px and set a new style (screen is larger than 600px but smaller than 768px):

Example

Note that the two sets of class styles are the same, but with different names (col- and col-m-):

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-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%;}
}
Try it yourself »
The above code looks redundant, but he can automatically set different styles according to the screen size, so it is still very necessary.

Orientation: Portrait/Landscape

Combined with CSS media queries, you can create layouts that fit the orientation of different devices (landscape, portrait, etc.).

Syntax:

  orientation  :   portrait   |   landscape  
  • portrait: specifies that the height of the visible area of the page in the output device is greater than or equal to the width
  • landscape: Except for the portrait value, landscape is all

Example

The page will have a lightblue foundation if the introduction is in scene mode:

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