CSS2導入メディアタイプ
@media CSS2に導入されたルールは、それが可能な異なるメディアタイプごとに異なるスタイルルールを定義することができました。
例：あなたはとても上のコンピュータ画面、プリンタの1、ハンドヘルドデバイスのための1つ、テレビ型デバイスのための1つ、とのスタイルのルールセットを1つ持つことができます。
残念ながら、これらのメディアタイプは、印刷メディアタイプ以外の機器で多くの支持を得たことはありません。
CSS3メディアクエリを発表します
CSS3メディアクエリはCSS2メディアタイプのアイデアを拡張します。その代わりに、デバイスのタイプを探して、彼らは、デバイスの能力を見てください。
メディアクエリは多くのことをチェックするために使用することができる、など。
- 幅とビューポートの高さ
- 幅とデバイスの高さ
- オリエンテーション（風景やポートレートモードでタブレット/携帯電話です？）
- 解決
メディアクエリを使用すると、タブレット、iPhone、およびアンドロイドに合わせたスタイルシートを配信するための人気のある技術です。
ブラウザのサポート
表中の数字は完全に@media規則をサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
メディアクエリー構文
メディアクエリは、メディアタイプで構成され、真または偽のいずれかに解決一つ以上の式を含むことができます。
@media not|onlymediatype and (expressions) {
CSS-Code;
}指定されたメディアタイプがドキュメントが上に表示されているデバイスのタイプと一致し、メディアクエリ内のすべての式が真である場合、クエリの結果は真です。 メディアクエリーが真である場合には、対応するスタイルシートやスタイルルールは通常のカスケーディング規則に従って、適用されます。
あなたがいないかだけの演算子を使用しない限り、メディアタイプはオプションであり、 allタイプが暗示されます。
また、別のメディアごとに異なるスタイルシートを持つことができます。
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">CSS3メディアタイプ
| 値 | 説明 |
|---|---|
| all | すべてのメディアタイプのデバイスのために使用さ |
| プリンタに使用されます | |
| screen | コンピュータ画面、タブレット、スマートフォンなどに使用します |
| speech | 大声ページを「読み取る」ことをスクリーンリーダーのために使用 |
メディアクエリー単純な例
メディアクエリを使用する1つの方法は、右のスタイルシートの内部代替CSS部を有することです。
次の例では、変化するbackground-colorビューポートは480ピクセルの幅以上の幅である場合（ビューポートが未満480ピクセルであれば、ライトグリーンにするとbackground-colorピンクになります）：
次の例では、ビューポート（ビューポート未満480ピクセルである場合、メニューはコンテンツの上になります）480ピクセルの幅以上の幅である場合は、ページの左側にフロートしますメニューを示しています。
例
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
»それを自分で試してみてください CSS3 @mediaリファレンス
すべてのメディアの種類と特徴/表現の完全な概要については、をご覧下さい@media私たちのCSSリファレンスのルール。