Media Queries..

Media Queries??? Heard?? me too not yet..lets see whats this, whats in spl and how it works? 😉

what is media queries exactly??

Media Queries is a CSS3 module allowing to adapt the rendering of webpages based on conditions such as screen resolution (e.g. smartphone vs. high definition screen)

Its very simple to implement..just add this code to separate css and link it in your html file..

code:

body:after {
content: “less than 320px”;
font-size: 300%;
font-weight: bold;
position: fixed;
bottom: 60px;
width: 100%;
text-align: center;
background-color: hsla(1,60%,40%,0.7);
color: #fff;
}
@media only screen and (min-width: 320px) {
body:after {
content: “320 to 480px”;
background-color: hsla(90,60%,40%,0.7);
}
}
@media only screen and (min-width: 480px) {
body:after {
content: “480 to 768px”;
background-color: hsla(180,60%,40%,0.7);
}
}
@media only screen and (min-width: 768px) {
body:after {
content: “768 to 1024px”;
background-color: hsla(270,60%,40%,0.7);
}
}
@media only screen and (min-width: 1024px) {
body:after {
content: “1024 and up”;
background-color: hsla(360,60%,40%,0.7);
}
}

youtube link:

Download File:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/

Media Queries for standard devices: Clickhere