Media Queries in CSS3

media queries in CSS 3 allows to define styles for different devices.For example you can define one set of styles for mobile device and different set of styles for desktop devies. So you can define rules based on things such as the screen size and orientation.
media query is defined using the @media element followed by the media query.The media query consists of the media element and the query expression.The result of the media query is true or false.If the result of the media is true then the styles defined are applied.

@media mediatype and (expressions) {
CSS-Code;
}

A type of media query you can define could be based on the width of the device.If the min width of the device is 500px then the corresponding CSS rules are applied:

@media screen and (min-width: 500px) {
h1 {
font-size: 50%;
}
}

Another type of media query you can define is for the print.In the case of printing body will be displayed in green color.

@media print {
body {
color: green;
}
}

In the case of normal view body will be displayed in green color.

@media screen {
body {
color: blue;
}
}

You can check different capabilities of the screen or device on which your page is being rendered and can apply the appropriate style based on that.Some of the things on which you can customize the styles are:

• Resolution of the device
• Width and Height of the screen
• Orientation of the screen

You can combine multiple media queries using the logical operators and,not and only.So if you want to specify style only if the minimum height of the screen is 50em and is in portrait mode then you can use the and operator:

@media (height : 50em) and (orientation: portrait ) 
{
//styles
}

 

Follow on: