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.

🙂

Advertisements

Database Linked to Life

Aside

Make your life as deep as a database
Be always as unique as a primary key
Be productive as an index
Take others good habits as a foreign key….!!!
Share your joys with others as a cluster
Keep note of your activities as good as data dictionary
Grant some privileges to others as a role
Secure the things as a dba….!!!
Do the things in order as a rowid
Follow your resolution as strict as a sequence
Light others life as a trigger
Be prepared for the worst as an exception….!!!
Always be fruitful as a function
Forgive others as a rollback transaction
Always help others like checkpoint
Choose the best path like an optimizer….!!!

Don’t  forget to comment if u like it. 🙂

Free Internship Program

Free Internship for All degree Students :

Online Application URL :
http://goo.gl/forms/QJXT5LWuMa

Internship Application
Top Performers will get job. All participants will get free certifications. No cost Internship Program.
Dear Interns!, Welcome All !!!
ALL Students Can Apply MBA, MCA, BE, Bsc, BCA,Diploma, etc,.

Congratulations on reaching this most exciting stage in your life! In the next several weeks/months you will be working on the most fascinating project. We will promise you that you can explore a new tool of “CLOUD TELEPHONIC and BIG DATA” for the very first time in India. The specially introduced CLOUD TELEPHONIC and BIG DATA tool will make the internship program more valuable with expert guidance and support you need.

Terms and conditions:
1)No Cost Internship.
2)Minimum of 15 working days.
3)Office hours are from 10:30am to 4:30pm.
4)No Transportation facility.
5)Need to Bring your own laptops.

Sollu India

1B, Nirupa Palace,
P-56, 6th Avenue,
Anna Nagar
Chennai 600 040
India
http://www.sollu.in/

Fresher Job

Airtel Walkin Interview For Freshers Hiring on June 2015
http://walkinfreshers.net/airtel-walkin-interview-for-fres…/
Google Walkin Interview For Freshers Hirin on 12th June 2015
http://walkinfreshers.net/google-walkin-interview-for-fres…/
Firstsource Walkin Interview For Freshers Hiring on 12th June 2015
http://walkinfreshers.net/firstsource-walkin-interview-for…/
CMC Walkin Interview For Freshers Hiring on 12th June 2015
http://walkinfreshers.net/cmc-walkin-interview-for-fresher…/
for More Jobs >>>> http://goo.gl/x6cC0p

Opportunity for Fresher

Company Name: Infosys
Walk In Date: 9th to 11th June 2015
http://www.freshers.asia/…/infosys-walk-in-for-fresher-on-…/
For Daily Jobs Updates in Your Mobile: https://goo.gl/djlIk3