CSS3 @mediaの基本的な使い方のまとめ

//文法：
@media mediatype and | not | only (メディア機能) { css-code; }
//メディアごとに異なるスタイルシートを使用することもできます: 
<link rel="stylesheet" media="mediatype and|not|only (メディア機能)" href="mystylesheet.css">

1. まず<meta>タグ

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">

このコードのいくつかのパラメータについて説明します。

幅 = デバイス幅: 幅は現在のデバイスの幅に等しい
initial-scale: 初期スケール（デフォルト設定は 1.0）
minimum-scale: ユーザーがズームできる最小スケール（デフォルト設定は 1.0）
最大スケール: ユーザーがズームできる最大スケール (デフォルト設定は 1.0)
user-scalable: ユーザーが手動でズームインおよびズームアウトできるかどうか (ユーザーがページをズームインおよびズームアウトできないようにするため、デフォルト設定は「いいえ」です)

2. <head> タグで導入 (CSS2 メディア)

実際、メディアの使用をサポートしているのは CSS3 だけではありません。CSS2 はすでにメディアをサポートしています。具体的な使用方法は、HTML ページの head タグに次のコードを挿入することです。

たとえば、現在のモバイルデバイスに縦型ディスプレイがあるかどうかを知りたい場合は、次のように記述できます。

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">

ページ幅が 960 未満の場合、指定されたスタイルファイルが実行されます。

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

CSS2 は CSS のこの効果を実現できるので、なぜこの方法を使用しないのですか? と疑問に思う人も多いかもしれませんが、上記の方法の最大の欠点は、ページに対する http リクエストの数が増え、ページの負荷が大きくなることです。 CSS3 を使用してすべてのスタイルを 1 つのファイルに記述するのが最善の方法です。

競合は次のように発生します。

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)">  
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

上記は、デバイスを3つのタイプに分類します。幅が800pxより大きい場合はstyleAが適用され、幅が600px〜800pxの場合はstyleBが適用され、幅が600px未満の場合はstyleCが適用されます。では、幅がちょうど 800 ピクセルの場合、どのようなスタイルを適用すればよいでしょうか?最初の 2 つの式は両方とも true であり、CSS のデフォルトの優先ルールに従って後者が前者を上書きするため、styleB になります。

したがって、競合を避けるために、この例は通常次のように記述する必要があります。

<link rel="スタイルシート" href="styleA.css" media="screen">  
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

3. CSS3 @mediaに戻る

上記では、CSS2 メディアクエリの使用について簡単に説明しました。次に、CSS3 メディアクエリに戻りましょう。最初のコードでは、960 ピクセル未満のサイズ用の書き込み方法を使用しました。次に、960 ピクセルに等しいコードを実装します。次のコードをスタイルタグまたは CSS ファイルに記述する必要があります。

@media スクリーンと (max-device-width:960px) {
    本文{背景:赤;}
}

次に、ブラウザのサイズが 960 ピクセルより大きい場合のコードを示します。

@media スクリーンと (min-width:960px) { 
    本文{背景:オレンジ;}
}

上記の用法を組み合わせることもできます。

@media スクリーンと (最小幅:960px) と (最大幅:1200px) {
    本文{背景:黄色;}
}

上記のコードは、ページの幅が 960px より大きく 1200px 未満の場合に次の CSS が実行されることを意味します。

4. すべてのメディアパラメータの概要

上記は、メディアクエリで最も頻繁に使用する必要がある 3 つの機能、「より大きい」、「等しい」、「より小さい」です。メディアクエリツールの完全な機能は、間違いなくこれら 3 つの機能だけではありません。以下に、そのパラメータの使用法の概要を示します。

width: ブラウザの表示幅。
height: ブラウザに表示される高さ。
device-width: デバイス画面の幅。
device-height: デバイス画面の高さ。
orientation: デバイスが現在横向きか縦向きかを検出します。
アスペクト比: ブラウザの表示幅と高さの比率を検出します。 (例: アスペクト比:16/9)
device-aspect-ratio: デバイスの幅と高さの比率を検出します。
color: 色を検出するビット数。 (例えば、min-color:32 はデバイスが 32 ビットカラーを持っているかどうかを検出します)
color-index: デバイスのカラーインデックステーブル内の色をチェックします。その値は負にできません。
モノクロ: モノクロフレームバッファー内のピクセルあたりのビット数をチェックします。 (これは高度すぎるので、めったに使用されないと思います)
解像度: 画面またはプリンターの解像度を検出します。 (例: min-resolution:300dpi または min-resolution:118dpcm)。
grid: 出力デバイスがグリッドデバイスかビットマップデバイスかを検出します。

(最大幅:599ピクセル) 
(最小幅:600ピクセル) 
(orientation:portrait) 縦画面 (orientation:landscape) 横画面 (-webkit-min-device-pixel-ratio: 2) ピクセル比

5. メディアタイプ

1.すべてのメディア

2. 点字触覚装置

3. エンボス点字プリンター

4.ハンドヘルドデバイスで印刷

5.投影印刷プレビュー

6.スクリーンカラースクリーン装置

7.音声「聴覚」類似メディアタイプ

8.ttyはピクセルデバイスには適していません

9. テレビ

6. キーワード

1.そして

2.not not キーワードは、特定の種類のメディアを除外するために使用されます。

3. 特定のメディアタイプを定義するためにのみ使用される

- メディア機能をサポートしていないがメディアタイプをサポートしているデバイスでよく使用されます

7. ブラウザのサポート

IE8-

IE9以上

Chrome 5以上

オペラ10+

Firefox 3.6以降<

サファリ4+

8. よく使われる画面幅の設定:

@media スクリーンと (最小幅: 1200px) {
        CSSコード;
}
@media screen かつ (最小幅: 960px) かつ (最大幅: 1199px) {
        CSSコード;
}
@media screen および (最小幅: 768px) および (最大幅: 959px) {
        CSSコード;
}
@media screen および (最小幅: 480px) および (最大幅: 767px) {
        CSSコード;
}
@media スクリーンと (最大幅: 479px) {
        CSSコード;
}

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。

<<: IE6では画像要素imgに余分な空白スペースがある

>>: アイデアを通じてプロジェクトをDockerにパッケージ化する方法