CSS のメディアタイプ media type_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS のメディアタイプ media type_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:58:04

オリジナル

1222 人が閲覧しました

マディアタイプの役割

まず第一に、私たちが通常作成する 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