Individual CSS rules and whole style sheets can be made apply selectively only to certain media types, such as screen, projection, print or handheld.
Specification of media types:
Media types by which the application of CSS can be restricted:
Media queries are a new rule format under CSS3 that will allow for behaviors based on properties of the user agent, such as the screen resolution of mobile devices. This feature is only partially implemented in the latest builds of WebKit, Presto and Gecko.
To try this out copy this code to your snippet editor or a new HTML file:
@media all {
div.mediaqueryexample {
height: 10em;
width: 10em;
background-color: red;
}
}
@media all and (min-width: 640px) {
div#mediaqueryexample1 {
background-color: green;
}
}
And then put this in the body:
<div class="mediaqueryexample" id="mediaqueryexample1">min-width: 640px</div>
After loading the page in your browser, resize the window to see the background color change when the condition is met.
Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your Digital Marketing and Technology knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.
Visit defaultLogic's partner sites below: