media query in HTML5

Often confusing statement Media query in HTML-5 for web developer.

By knowing this following point you should get clear idea about this:-

1. what is a media query ?

Media query is a conditional statement like if  statement in programming language.It  provides a break point for web pages.


2. Why it Introduce or what is the purpose of Media query ?

The purpose of media query is that to build a responsive site, which can be set to any device.


3. How to use Media query ?

To use Media query we required to prefix with ‘@’ symbol of Media statement.


Media query basically works on two condition i.e max-width and min-width , and this two condition often makes confusion to  web programmer.

Let me clear this concept what is the meaning of max-width :-

If we write @Media (max-width: 550px) { your css properties }

Hear it mean that when ever the screen size is become 550px or less then 550px then the css properties will be apply to our page.

Or simply we say that i.e the maximum value under this value only the css will apply, if it go above 550px then the particular css properties which defined inside curly bracket can not be applied.

Note:You can not write like the below statement(i.e if(cond.)) it only for understand purpose.


“or to make more clear  if we convert media query to IF condition block then it will be like that if(screen size <=550px) { apply css }”

Now what is the meaning of min-width ?

If we write @Media (min-width:430px) { your css }

then it says that :

when the screen size become 430px or more then 430px then the css properties to be applied on your web page.

Or simply it saying that when the screen minimum size is 430 then it apply that means the max value is unknown to us, it apply over all pixel value which is greater then 430px.

If we convert this thing to IF condition then it will be like that : if(screen-size >= 430px) { apply your css }


Hope now you got clear idea about this max-width and min-width and  their working perspective.

If any thing required to improve in this article please give your suggestion.

Don’t forget to comment.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s