ホームページ > 記事 > ウェブフロントエンド > CSS のメディア タイプ media type_html/css_WEB-ITnose
CSS のメディア タイプ media type_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:58:041224ブラウズ
マディアタイプの役割
まず第一に、私たちが通常作成する HTML ページは、画面上に表示される場合や紙の印刷物上に表示される場合など、さまざまなメディア タイプで表示される可能性があることを理解する必要があります。ページが異なるメディア タイプで表示されると、必要なスタイルも異なる可能性があります。例えば、一般に、画面に表示する場合にはページのフォントサイズを大きくし、紙媒体に表示する場合にはページのフォントサイズを小さくする必要がある。では、スタイルがどのメディアタイプに適しているかを誰かに伝えるにはどうすればよいでしょうか?これはメディア タイプを宣言することで実現されます。
メディア タイプの宣言方法
一般的なメディア タイプは、all、screen、print、handled、speech などです。
メディア タイプは大文字と小文字のみを区別することに注意してください。間違ったメディア タイプ、または存在しないメディア タイプの場合、このメディア タイプの存在は次のように無視されます。
@media screen, 3D { P { color: green; }} ここで、3D は存在しないメディア タイプであり、ブラウザはそれを として解析します。
@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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。