1.8 KiB
| title |
|---|
| CSS3 at Media Rule |
CSS3 at Media Rule
The CSS3 Media rule is a rule that allows for use of media queries. Media queries can allow you to style your webpage (either a portion or all of it) differently based on different media types or devices.
A Media Query is created by using the @media tag and then supplying a rule in order to check for things such as:
- Width and height of the current viewport
- Orientation of the device (this applies to tablets or phones)
- Current resolution
- And More
There are currently four possible Media Types:
- all (Default - this will target all devices)
- print (Used for printers; e.g. providing separate print styles)
- screen (Used for computers, phones, tablets, etc.)
- speech (Used for accessibility devices such as screenreader that narate the contents of a webpage)
Media queries are used for all sorts of purporses as they allow many differnet media features. One of the most common uses of a Media query is to make a web page responsive; meaning it will behave differently based on the screen size.
An example media query is as follows:
@media screen and (max-width: 1000px) {
body {
background: #000;
}
}
The CSS in the Media Query rule only applies when the rule holds true. For example, looking at the snippet above, the body background will be changed to #000 only when the a user visits the page with a device that is 1000px wide or less. If above 1000px, that rule will not apply.