May 03, 2021 CSS
Media types allow you to specify how files will be rendered in different media. T he file can be displayed on the screen in different ways, on paper, or in an auditory browser, etc.
Some CSS properties are only designed to target certain media. F
or example,
voice-family
is designed for auditory user terminals.
/b10>Some other properties can be used for different media types. F
or example,
font-size
can be used for screen and print media, but with different values.
Different from files on screen and paper, it usually requires a larger font,
sans - serif
font is more suitable for reading on the screen, and serif font is easier to read on paper.
@media rules allow different styles to be styled for different media in the same style sheet.
The following example tells us that a 14-pixel Verdana font style is displayed on the browser screen. B
ut if the page is printed, it will be a 10-pixel Times font.
Note that
font-weight
set to bold on the screen and on paper:
<style>
@media screen
{ p.test {font-family:verdana,sans-serif; f ont-size:14px; } }
@media print
{ p.test {font-family:times,serif; f ont-size:10px; } }
@media screen,print
{ p.test {font-weight:bold; }}
</style>
You can try it yourself!
If you're printing this page using Mozilla /Firefox or IE5 plus, you'll see
Media Types
will appear in a font smaller than other text font sizes.
Tip: For @media of these rules, refer to the CSS @media Inquiry section of the CSS Reference Manual.
Note: Media type names are not case sensitive.
The type of media | Describe |
---|---|
all | For all media devices. |
aural | For speech and audio synthesizers. |
braille | Haptic feedback device for blind people using dot-word method. |
embossed | A dot-word printer for the blind for pedding. |
handheld | For small handheld devices. |
For printers. | |
projection | For scenario presentations, such as slides. |
screen | For computer monitors. |
Tty | Media used to use fixed-density letter rasters, such as electric typewriters and terminals. |
tv | A device for a TV type. |
CSS3 tutorial: CSS3 multimedia query