Learn more about CSS3 media

css3 Media

Media Type Media Type

Media type is a very useful attribute in CSS2. Media types allow you to specify different styles for different devices.
W3C lists ten media types in total, as shown in the table:

Value	Device Type
all	All devices
Braille	Braille tactile feedback device for the blind
Embossed	Braille typewriter
Handheld	Portable device
Print	Printing paper Or print preview view
Projection	Various projection equipment
Screen	Computer monitor
Speech	Voice or Audio Synthesizer
TV	Television Type Device
Tty	Media that use a fixed density letter grid, such as teletypewriters and terminals

Where screen, all, print are the three most common media types.

Media type reference method

1. link method: Introduce the media type when the tag references the style, and specify it through the media attribute Different media types.

   <link rel="stylesheet" type="text/css" href="style.css" media="screen">

2. xml method: Similar to the media type introduced by link, it is also specified through the media attribute.

   <?xml-stylesheet type="text/css" media="screen" href="style.css">

3. @import method: @import is one of the methods used to reference style files, and can also be used to reference types. @importThere are two main ways to introduce media types.

   One is to call another file through @import in the style file;

   @import url(style.css) screen;

   The other is to introduce it in the tag