まず第一に、私たちが通常作成する HTML ページは、画面上に表示される場合や紙の印刷物上に表示される場合など、さまざまなメディア タイプで表示される可能性があることを理解する必要があります。ページが異なるメディア タイプで表示されると、必要なスタイルも異なる可能性があります。例えば、一般に、画面に表示する場合にはページのフォントサイズを大きくし、紙媒体に表示する場合にはページのフォントサイズを小さくする必要がある。では、スタイルがどのメディアタイプに適しているかを誰かに伝えるにはどうすればよいでしょうか?これはメディア タイプを宣言することで実現されます。
一般的なメディア タイプは、all、screen、print、handled、speech などです。
メディア タイプは大文字と小文字のみを区別することに注意してください。間違ったメディア タイプ、または存在しないメディア タイプの場合、このメディア タイプの存在は次のように無視されます。
@media screen, 3D { P { color: green; }}として解析します。
@media screen { P { color: green; }}
スタイルの設定方法 メディア タイプを宣言するには、次のサンプル コードを参照してください:
<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> メディア タイプの詳細については、W3C 公式 Web サイトを参照してください: http://www.w3 .org/TR/CSS21/media.html
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
