@media rule was introduced in CSS, made it possible to define different style rules for different media types.
Examples: You could have one set of style rules for computer screens, one for handheld devices, one for television-type devices, and so on.
CSS3 Introduces Media Queries
Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
@media not|only mediatype and (expressions) {
CSS-Code;}
CSS-Code;}
example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 560px) {
body {
background-color: brown;
}
}
</style>
</head>
<body>
The following example shows a menu that will float to the left of the page if the viewport is 560 pixels wide or wider (if the viewport is less than 560 pixels, the menu will be on top of the content):
0 comments:
Post a Comment