CSS3の@media

CSS3の@media

---

可視領域未満1200px 960ピクセル幅本体に配置された背景色の幅黄色よりも大きいです

1 2 3

@media画面と（最小幅：960ピクセル幅）と（最大幅：1200px）{ 本体{背景：黄色;} }

@mediaは、メディアデバイスタイプ、一つ以上のスタイルの特定の特性及び環境検索アプリケーションに基づくことができます。

@mediaルールは、1つまたは複数のメディアクエリーから成る、各クエリは、メディアといくつかの代替メディア特性のメディアタイプを含みます。複数のクエリは、多くの方法でそれを使用して、論理演算子によって結合され、大文字と小文字が区別されてもよいです。

@mediaメディアクエリーが真と評価されたときにルールが唯一、それは指定されたメディアタイプが文書を表示し、すべてのメディアは、式がtrueと評価されています、唯一の適切なスタイルを適用されている機器の種類と一致したときに、あります。

メディアタイプ

1. すべて：すべてのメディア
2. 点字：点字触覚デバイス
3. エンボス：点字プリンタ
4. 印刷：ハンドヘルドデバイス
5. 投影：印刷プレビュー
6. 画面：カラー表示装置
7. 講演：類似したメディアの種類「を聞きます」
8. TTY：デバイスピクセルNA
9. テレビ：TV

すべてのパラメータのメディア

1. 幅：視覚的なブラウザの幅。
2. 高さ：ブラウザのビジュアルの高さ。
3. 幅デバイス：デバイスの画面の幅。
4. 高さ・デバイス：デバイスの画面の高さ。
5. オリエンテーション：水平または垂直の状態で現在検出装置。
6. 比アスペクト：視覚的なブラウザの検出器幅と高さの比。
7. アスペクト比・デバイス：検出装置の幅と高さの比率。
8. 色：色のビット数を検出します。
9. インデックス色：カラーテーブルでカラーインデックス検査装置、彼は負の値にすることはできません。
10. モノクロ：ピクセル単色フレーム検出バッファ領域当たりのビット。
11. 解像度：解像度テスト画面やプリンタ。
12. グリッド：出力デバイスを検出するには、メッシュデバイスまたはビットマップです。

キーワード

1. そして、：複数のメディアタイプまたはパラメータをマージします
2. ない：特定の確立のメディアタイプを除外するために
3. のみ：特定のメディアタイプを設定するには

いくつかの一般的に使用される設定画面の幅

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

スクリーンと@media（最小幅：1200px）{ 1200pxより大きい//幅 } @media画面と（最小幅：960ピクセル幅）と（最大幅：1199px）{ //は960ピクセル幅1199pxより大きい幅よりも小さい } @mediaスクリーンと（最小幅：768px）と（最大幅：959px）{ //幅より大きい768px 959pxよりも小さい } @media画面と（最小幅：480PX）と（最大幅：767px）{ //幅よりも小さいより大きい480PX 767px } @media画面と（MAX-幅：479px）{ //より小さい479px幅 }

オリジナル：大列  CSS3 @media