Need of Media Query

In simple words, media queries are used to make webpages responsive to screen types. with help of media queries, we can apply different CSS styles for different devices like mobile, tablet and laptop/desktops. We can show content effectively according to the screen size so it becomes more readable. In this article, we will follow the mobile-first design approach.

How to write media queries?

let's see the syntax of the media query

@media screen and (min-width:1024px){
     /* //CSS style to apply; */
}
@media media-type operator (condition) {
    /* //CSS style to apply; */
    }

• Media Type - Which type of device we are targeting we mostly use the screen as we target device which has a screen. other media types as follows

  • all: by default:- matches all devices

  • screen: a device that has a screen.

  • print: for printing the document or content seen in the print preview

  • speech: for devices that read content

• Operator: This is a logical operator which combines multiple conditions we mostly use and operator.

• Condition: This is the media feature where you can mention the screen size of the device and apply the style for that screen only.

In media query, we mostly use media type as a screen. The important thing to understand is how to set conditions for different screens. In the following section, we will see the conditions in detail.

min-width

we set the screen size from which our style will apply. The mentioned style will apply from mentioned px up to the last or next condition.

@media screen and (min-width:768px){
    body{
        background-color: firebrick;
        background-image: radial-gradient(whitesmoke,firebrick);
    }  
}

In the above code, The background color will change when the screen size is 768px and above.

max-width

we set the screen size up to which our style will apply. The mentioned style will apply from 0px or any previous condition up to max-width. here 768px is called a breakpoint of the screen.

@media (max-width:768px){
    body{
        background-color: gold;
        background-image: radial-gradient(whitesmoke,gold);
    }   
}

In the above code, The background color will remain when screen size is below 768px .

• We can consider min-width as from screen size style will apply.

• We can consider max-width up to screen size style will apply.

In the above code, first, we designed the webpage on a small screen. where you can see the header, content in one column and footer.

For medium devices, we used min-width:768px so our style will apply from 768 px. when clicking on 0.5x in the above code pen you can see the change. Now we can see the nav bar and background color are changed. and the main content is in two columns now.

For large devices, we used min-width:1024px so our style will apply from 1024px. when clicking on 0.25x in the above code pen you can see the change. The background color is red and contained in a single row.

So in this example, we applied styles for the medium and large devices as follows first we designed for the small screen. then from 768px to 1024 px is medium device and from 1024px above large device.

Summary

The media queries are used for making the webpage responsive according to screen size. So in mobile-first, we use the following media queries

/* medium Device */
@media (min-width:768px){
    /* This style will apply from 768px and above */
}

/* larger Device */
@media screen and (min-width:1024px){
    /* This style will apply from 1024px and above */

}

So most common breakpoints for responsive design are as follows

The code files are in the following Git-hub repository.

Thanks For Reading!!!!!!!!!!!!!!!!!!!!!!!