First of all, we need to understand that the HTML pages we usually write may be displayed in different media types, such as they may be displayed on the screen or on paper print on. Then when the page is displayed in different media types, the required styles may be different. For example, generally, the font size of the page should be larger when displayed on the screen, and smaller when displayed on paper media. So how do you tell someone what media type a style is suitable for? This is achieved by declaring media type.
Common media types are: all, screen, print, handled, speech, etc.;
Note that media types are case-sensitive and can only be Lowercase;
When the browser encounters an incorrect media type or a non-existent media type, it will ignore the existence of this media type, such as:
@media screen, 3D { P { color: green; }}
@media screen { P { color: green; }}How to declare the media type for the style, see the following sample code:
<span style="font-size:14px;"><head> <link rel="stylesheet" type="text/css" href="mystyle1.css" media="screen,print"><span style="color:#ff6666;"><!--mystyle1样式表只应用于screen和print媒介--></span> <style> @import url("mystyle2.css") screen,print;<span style="color:#ff6666;">/*mystyle2样式表只应用于screen和print媒介*/</span> @media screen { body{font-size:14px;} <span style="color:#ff6666;"> /*在screen媒介中body字体为14px*/</span> } @media print { body{font-size: 10px;} <span style="color:#ff6666;"> /*在print媒介中body字体为10px*/</span> } body{color: #ff0000;}<span style="color:#ff6666;">/*若样式没有声明媒体类型，相当于媒体类型为all，则此样式会应用于所有的媒体类型*/</span> </style></head></span>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
