home

Css3 Media Queries

Media queries are the most important things to know for interface developers who make attractive and responsiveness by using css, developed by w3c, based on market w3c development team updated as on user view, media queries react based on the condition just follow the below simple example codes.

Media Queries
Namespaces
Selectors Level3
Colors

Media Queries are allowing content render into user interfaces such as screen resolution like desktops and tablets and smartphones. Finally, it became a w3c recommended standard in 2012 June. A media query persistently checks the, if it's matching then its pass the expression to that particular type, it’s like a true or false matching or not matching.

Min-Width Example code

This condition will work if device size more than 500px.

@media screen and (min-width:500px){
#navigation{
     flat:left;
     width:100%;
     height:100px;
     }
}

Max-Width Example code

This condition will work if device till 500px.

@media screen and (max-width:500px){
#header{
     width:900px;
     color:red;
     font-sixe:12px;
     }
}

Min-Width and Max-width

This condition will work if device width min width 500px and max width 600px.

@media(min-width: 500px) and (max-width: 600px){
  #heading{
     width:900px;
     color:red;
     font-sixe:18px;
     }
  .desc:after{
      condition between 500px and 600px wide.";
     }
     }

Media Types

A media type can be declared in the head of an HTML document using the "media" attribute inside of a element. The value of the "media" attribute specifies on what device the linked document will be displayed. Media types can also be declared within XML processing instructions, the @import at-rule, and the @media at-rule. CSS2 defines the following as media types: