Confusion about Min-width & Max-width in Media Query in Css

What is Media Query:

In Css-3 The concept of Media-Query was introduced in 2012, The main idea of this is to handle screen Design on defferent Screen Sizes:


you Wrote css lines to manage you site header, but when you will change the the screen size in your browser, u will analyze that design has changed his shape and your applyed css is not working well.


Therefor in june 2012 in css3, this concept was intrduced to handle different screen sizes of websites where design can be handle in very good manner.

How Media Query Works:

we can tell css how to handle our design, suppose i write a css line to change background color of header, but in tablet i want to display different color, so i can tell to media query please take care of my requirnment, media query will say tell me what is your tablet size, and i will tell him the size of tablet and then he will ask me again what color you u want to set on this size, then i will tell him about color. lets see Example:

Example of Media Query:

#header {
background-color: gree;
/* tell media query about my requirnment */@media scree and (max-width: 480) { background-color: red;}

Question:??? what is min-width in this example

now tell talk about min-width and max-width

its very simple lets learn your brain by my words.!


its simply mean, minimum width of screen lets explain: i am telling media query apply this css code but the limit is there you can apply this css when your screen is grator than minimum width, you cannot go down to this limit.


@media scree and (min-width: 400px) { 
#header: background-color:red;
/* i am telling media to apply red color to hear when screen size is > or = to 400 other wise you cannot go beyond this limit, minimum down limit is 400px, if you exceed this limit like 390px then this code will not apply on header.


same like min-width, we can tell media to please add this line of code to my targeted element but there is limit for you to applying this code to targeted element.!


@media screen and (max-width: 500px) { #header: background-color: green;}/*I am telling to media that apply this css to header but max screen size limit for you is 500px, u cannot go ahead to this limit.!*/

Code Example:



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Toseef Ahmad

Toseef Ahmad

Hy, i'm ReactJS Front End Developer And CYBER SECURITY Export. i love Computer Science!