Media type and media type in CSS

Media type and media type in CSS
Role of madia type

First, we need to understand that the HTML pages we usually write may be displayed in different media types, such as on the screen sreen or on the paper print. When the page is displayed in different media types, the style may be different. For example, when the screen is displayed, the page font is larger and the page font is smaller when the paper media is displayed. So how can we tell others which media type A style applies? This is achieved by declaring the media type.

How to declare media types common media types include all, screen, print, handled, and speech. Note that media types are case sensitive and can only be in lower case. When a browser encounters an incorrect media type, or a non-existing media type will be ignored, such:

@media screen, 3D {  P { color: green; }}

Here, 3D is a media type that does not exist, and the browser will parse it

@media screen {  P { color: green; }}

How do I declare a media type for a style?
1. <link> media attribute example of a tag: <link rel = "stylesheet" type = "text/css" href = "xxx.css" media = "screen, print"/>
2. <style> media attribute example of a tag: <style media = "all" type = "text/css">
P {
Color: # ff0000
}
</Style>

3. @ import method example: <style>
@ Import url ("xxx.css") "screen, print ";
</Style>

4. Specify the media example for certain styles in the style: <style>
@ Media speech {
P {
Color: # ff0000
}
}
@ Media print {
P {
Color: blue;
}
}
</Style>

5. If media is not specified, the default value of media is "all". That is, this style applies to all media types.

For more information about multimedia types, see W3C Official Website: http://www.w3.org/TR/CSS21/media.html

I don't know this code when DIV + CSS references a CSS: media = "screen"

Media specifies the media type. The default value is screen. In addition
Print, output to the printer;
Projection, submitted to the projector;
Aural, speaker;
Braille, submitted to the convex-text tactile sensing device;
Tty, telex typewriter (using a fixed font );
TV, TV set;
All, all output devices
--
The above is a traditional explanation. In fact, you can also use @ media to set different styles at different resolutions.
For example, you have set the max-width (maximum width) of the page to 960px.
In traditional usage, No matter what resolution it is, it is expressed in this way.
However, you can use media to specify that when the browser width is greater than 1000px, the max-width is 960px.
On a mobile phone, such as IP4s, you can set its max-width to 480px.

<Link href = "/Skin/printcss" rel = "stylesheet" type = "text/css" media = "print"/> help me explain this code

This is the code for importing external CSS files, and the sample application is in the preview mode. The print.css file used by this Code does not work when the webpage is browsed normally. It will be used only when the page is printed.
Link is an html Tag that imports external files.
Href is the path of the imported file.
Rel defines the relationship between the document and the link. The value of "stylesheet" is an externally loaded style table.
Type indicates the type of the file to be imported. The value "text/css" indicates the css file.
Media type. The default value is screen (computer screen ). The value "print" indicates the print preview mode.