How CSS uses media types
This article is about how CSS uses media types. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Depending on the Web site, page errors can occur in unexpected forms, such as layout folding when printing, but in the media type, you can set it to avoid it, which means you can create pages for printing, pages output to the projector, and so on.
How do I use CSS media types?
Media types can be written in two ways.
The first way
The second way
@ mediascreen {
/ * content of screen * /
}
The first one uses the CSS that changes the application based on the media type.
The second is the settings written for each media type in CSS
Because it is sometimes difficult to change when there is a lot of CSS code, it is recommended to use the first approach, but this time we will take the second way as an example to introduce the CSS media type.
Let's first take a brief look at several media types commonly used in CSS
Screen (screen)
Print (print)
Tv (TV)
Projection (projector)
All (all)
When using two media types, you can separate them with commas. Let's take a look at a specific example.
The code is as follows
HTML code
Media Typ
Sample
The background color will change depending on the media.
Screen: normal display: # d9534f (red)
Print: display when printing: # 5bc0de (blue)
CSS code
Sample.css
@ mediaall {
P {
Color:#000000
}
}
@ mediaprint {
Body {
Color:#5bc0de
}
}
@ mediascreen {
Body {
Color:#d9534f
}
}
Thank you for reading! This is the end of this article on "how to use Media types in CSS". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
