@media at-rules, used to target styles at specific media, such as screen or print.A page can then be optimized and laid out completely differently for mobile phones, tablets, and varying browser window sizes.
@media screen {
body { font: 12px arial, sans-serif }
#nav { display: block }
}
Browser-size specific CSS
@media screen and (max-width: 1000px) {
#content { width: 100% }
}
This is telling a browser to apply a block of CSS when its viewport is 1000 pixels wide or less. You could use this to do something as simple as making a content area or navigation narrower or you could completely re-arrange a page layout.
also you can apply more than 1 @media rule.
@media screen and (max-width: 1000px) {
#content { width: 100% }
}
@media screen and (max-width: 800px) {
#nav { float: none }
}
@media screen and (max-width: 600px) {
#content aside {
float: none;
display: block;
}
}Orientation-specific CSS
If you have a hankering for applying CSS depending on the orientation of the browser, fill your boots with something like the following:
@media screen and (orientation: landscape) {
#nav { float: left }
}
@media screen and (orientation: portrait) {
#nav { float: none }
}
This could be specially useful with mobile devices.
