WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Responsive Web Design - Media Queries


What is a Media Query?

Media inquiry is a CSS strategy presented in CSS3.

It utilizes the @media principle to incorporate a square of CSS properties just if a certain condition is true.

Example

If the program window is littler than 500px, the foundation shading will change to green:

@media just screen and (max-width: 500px) {
    body {
        foundation shading: greeb;
    }
}
Try it yourself »

Add a Breakpoint

Earlier in this instructional exercise we made a website page with lines and segments, and it was responsive, yet it didn't look great on a little screen.

Media questions can help with that. We can include a breakpoint where certain parts of the structure will act contrastingly on each side of the breakpoint.


Work area

Telephone

Use a media inquiry to include a breakpoint at 768px:

Example

When the screen (program window) gets littler than 768px, each section ought to have a width of 100%:

/* For work area: */
.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 just screen and (max-width: 768px) {
    /* For cell phones: */
    [class*="col-"] {
        width: 100%;
    }
}
Try it yourself »

Always Design for Mobile First

Mobile First methods planning for versatile before structuring for work area or any other gadget (This will make the page show quicker on littler devices).

This implies that we should roll out a few improvements in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should change the structure when the width gets larger than 768px. This will make our plan Mobile First:

Example

/* For cell phones: */
[class*="col-"] {
    width: 100%;
}
@media just screen and (min-width: 768px) {
   /* For work area: */
    .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 include the same number of breakpoints as you like.

We will likewise embed a breakpoint among tablets and versatile phones.


Work area

Tablet

Telephone

We do this by including one additional media question (at 600px), and a lot of new classes for gadgets bigger than 600px (be that as it may, littler than 768px):

Example

Note that the two arrangements of classes are practically indistinguishable, the main contrast is the name (col-and col-m-):

/* For cell phones: */
[class*="col-"] {
    width: 100%;
}
@media just 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 just screen and (min-width: 768px) {
   /* For work area: */
    .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 »

It may appear to be odd that we have two arrangements of indistinguishable classes, however it gives us the opportunity in HTML, to choose what will occur with the sections at each breakpoint:

HTML Example

For desktop:

The first and the third area will both range 3 sections each. The center segment will traverse 6 columns.

For tablets:

The first segment will traverse 3 sections, the second will traverse 9, and the third area will be shown beneath the initial two areas, and it will traverse 12 columns:

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

Orientation: Portrait/Landscape

Media questions can likewise be utilized to change design of a page contingent upon the introduction of the browser.

You can have a lot of CSS properties that will as it were apply when the program window is more extensive than its stature, a purported "Landscape" introduction:

Example

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

@media just screen and (introduction: scene) {
    body {
        foundation shading: lightblue;
    }
}
Try it yourself »