Media Query in CSS

Today, In 2019 everyone needs responsive web design for their websites. Before bootstrap and other front-end frameworks, we can create a responsive website design using CSS media queries. even all the frameworks are using media queries in the back-end. So today we will see in this article media query in CSS. Also, we will see many topics and examples of media query which will make your all doubts clear.

What is Media Query


A media query is a CSS technique is introduces in CSS3 in June 2012. This one is introduced by W3C recommended. This one is a very popular technique for delivering for Media queries are a popular technique for customize style sheets for different devices. You can do whatever in media query which you can do with normal CSS. If I can give a simple definition of media query in simple workds then a Media query is a technique in CSS which one is used for a specific width to give effects.

When you use media query for a specific width then this will work only in width which you have given. Here you can give give two also widths for media query effects source width to destination width. basically use can define media query using @media. Let’s see the simple syntax of the media query.

Syntax of Media Query


This one is the simple syntax of the media query. In the above example we have defined max-width: 500px. this means when your website will open in less than 500px this will start working.

Here we have two syntaxes for this method one is max-width and the second one is min-width. Let I know you max-width and min-width in very deep.

Max-width in CSS Media Query


Max-width in CSS media queries is an important part. If you want to give a maximum width for media query wich one effect only source to maximum destination width; There max-width is useful. In actual the max-width allows CSS to apply in the given maximum width. If you have given max-width 768px in media query then all the CSS which you have given in media query will work only in less then 768pxs. when your website opens in 769px then media query stoping their work automatically. An example of max-width is bellow.

Example of Max-width in Media Query


See at the top we have a very easy example for understanding Media query Max-width. Let me explain this example.

Here We have a body tag. In which we have given some CSS for background color.

Normally, we have given background-color: red. It’s mean now our website background color is red. This will show the background red. Now at the bottom of this, we have given some media queries which will make different background colors for all the different screen sizes.

In the media query, we have given @media screen and (max-width: 992px). This will affect less than 992px only. In 992px we have given background color light blue. Now, we have background color red, but when your screen will go less than 992px then the background color will automatically light blue.

Same as 992px we also have given max-width: 600px. When our screen will go less than 600px then the background color will change light blue to light green.

So in this example, we will see three colors for all the screen sizes. Like when we open the website then the background color will red. Then we move less than 992px background color will red to light blue. and when we move less than 600px then the background color will light blue to light green.

Let’s see the concept of min-width in media CSS media queries.

Min-width in CSS Media Query


Min width in CSS media query this is the minimum width from thair your CSS will start working. The syntax is the same as max-width but both are working very opposite. You can also media min with using @media screen and min-width then after your minimum width.

Here this will over more than the width which you have given. Opposite this the media query max-width working less than the screen width which we have given. Let see an example of CSS media query min-width.

Example of Min-width in CSS Media Query


This is the same example that we have seen in max-width. I have taken these both are the same examples for your better understanding.

In this example, we have given a red color for the background. That means now our background is red. But at the bottom of this we have given media screen min-width: 992px for light blue color. When your screen will open in more than 992px then body background will covert in Light Blue. When your screen opens in less than 992px then the background color will go back in red color.

I hope you have understood this both. Now, We will go to use both are together. Yes, This will also possible. And very helpful for different devices. so let’s understand min and max with together.

Min-width and Max-width in CSS Media Query


Min-width and max-width are used for giving a specific width gape for CSS effects. In this method, we have to give two widths one is min-width and another one is max-width. all the effects will works in between then both screen sizes. Let’s see syntax and then after we will see the example.

Here we have seen min-width: 768px and max-width: 992px. That mean now our CSS will play between 768px to 992px. When we will go more than 992px then media query turned off automatically. and also when we open the website in less then 768px then media query work will be turned off automatically. Let’s see an example of CSS media query min-width and max-width.

Example of CSS Media Query Min-width and Max-width


In this example, we have given body background color red; and this will work properly. but when your website open in 768px to 1024px width screen then background color transfer to green color. This will show only between the width which we have given min-width and max-width.


Read Also:


1. What is responsive web design, And the use of it?

2. Best Responsive Web Design Frameworks Of 2019 with CDN

3. Best Web Design Companies in India with Alexa rank

4. Top Five Free Online Code Editors for Web Designers and Web Developers

** Conclusion **


I hope you have clear all the doubts of the media query. if you have any kind of question-related to web designing and also other front-end frameworks then don’t be hasitet to ask questions. You can ask questions in the bottom comment box and also our question-answer page.

2 thoughts on “Media Query in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *