@media
Rule
:
Definition and Usage
The @media rule is used to define different style rules for
different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called
media queries.
Media queries look at the capability of the device, and 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
- and much more
Example:
<!DOCTYPE
html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
@media
screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 600px) {
body {
background-color: orange;
}
}
</style>
</head>
<body>
<h1>Resize
the browser window to see the effect!</h1>
<p>The
media query will only apply if the media type is screen and the viewport is
480px wide or wider.</p>
</body>
</html>
Use the @media rule to
make responsive design:
@media only screen and (max-width:
500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
Comments
Post a Comment