CSS3でのメディアメディアクエリの使い方を詳しく解説

近年のレスポンシブレイアウトの開発により、一度開発すれば何度でも使えるレスポンシブWebサイトの需要が高まっています。しかし、Web サイトを画面に適応させるにはどうすればよいでしょうか?ここで、CSS3 の新しいテクノロジーであるメディア メディア ククエリーについて言及する必要があります。

では、メディア クエイヤーとは何ですか?

メディアメディアクエリーは、Webサイトを開く端末の画面解像度を検出できるCSS3の新しいテクノロジーです。

メディアメディアクエリーは、大まかに次のように使用されます:

1. 次のようなメタタグを設定します:

<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

関連パラメータの説明:

Device-width: 出力デバイスの画面の表示幅を定義します。 。

device-height:出力デバイスの画面の表示高さを定義します。

width = device-width: 幅は現在のデバイスの幅と同じです。

Initial-scale: 初期スケーリング率(デフォルト設定は1.0)。

minimum-scale: ユーザーがズームできる最小スケール (デフォルトは 1.0)。

maximum-scale: ユーザーがズームできる最大比率(デフォルト設定は1.0)。

user-scalable: ユーザーが手動でズームできるかどうか (ユーザーにページをズームインしたりズームアウトしたくないため、デフォルト設定は「いいえ」です)。

2. 互換性のあるファイル js をロードする

互換性のあるファイル js をロードする理由

IE8以降のコアはhtml5やCSS3メディアと互換性がないためです。したがって、コードを実装するには、2 つの互換性のあるファイルをロードする必要があります。

1 <!--[if lt IE 9]>
2 <script src=" 
3      <script src=" 
4 <![endif]-->

html5hiv.js をダウンロードして自分で応答することもできます。js を使用する場合は、対応するスクリプト内の src パスを変更するだけです。

3. IE のレンダリング モードを最高レベルに調整します。ほとんどの IE はバージョン 9 以降です。このバージョンの IE のドキュメント モードは最新ではないため、次のコードを使用して IE のドキュメント モードを最新に保つことができます。 :

1 <meta http-equiv="X-UA-Compatible" content="IE=edge">

2 番目の方法:

1 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

Google chrome フレームとこの Google chrome プラグインをインストールします。これにより、すべてのブラウザで植字と計算に Webkit エンジンと V8 エンジンを使用できるようになります。このプラグインがインストールされていない場合、上記のコードによりブラウザは最高のドキュメント モードを表示します。

CSS3メディアの標準的な記述方法:

例: ページが960pxより小さい場合、その下のCSSコードを実行します。

1 @media screen and (max-width: 960px){
3     body{
5         background: #000;
7      }
9 }

このコードには画面があり、ページを印刷するときにセリフ フォントを使用するようにデバイスに指示することを意味します。

CSS2 メディアの使用法

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

1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">

今知りたい モバイルデバイスの表示画面が縦長の場合は、次のように記述できます:

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

コードの最初の段落も CSS2 で実装されているため、指定されたスタイルも実行できますページ幅が 960 未満の場合はファイルを作成します:

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

ただし、この方法では http アクセス数が増加します。したがって、CSS3 を使用してすべての CSS をまとめて記述するのが最善です。

さて、CSS3 のメディア使用法に戻りましょう。CSS3 を使用して 960px 未満の画面幅のサイズを記述する方法について説明しました。次に、960px に等しいサイズを記述する方法を書きましょう。 960pxを超える幅の記述方法:

1 @media screen and （max-width-device：960px）{
2 
3 Body{
4 
5        Background：blue；
6 
7 
}
8 
9 }

上記はよく使われるいくつかの記述方法です。 次に、CSS3メディアについてまとめます:

width

: ブラウザに表示される幅。

高さ

: ブラウザに表示される高さ。

device-width

: デバイスの画面の幅。

device-height:

デバイスの画面の高さ。

方向

: デバイスが現在横向きか縦向きかを確認します。

aspect-ratio

: ブラウザーに表示される幅と高さの比率を検出します。 (例: アスペクト比:16/9)

device-aspect-ratio

: デバイスの幅と高さの比率を検出します。

color

: 色を検出する桁数。 (例: min-color:32 は、デバイスが 32 ビット カラーであるかどうかを検出します)

color-index

: デバイス カラー インデックス テーブル内の色を確認します。その値は負の数であってはなりません。

モノクロ

: モノクロフレームバッファ領域のピクセルあたりのビット数を検出します。 (これは高度すぎるので、ほとんど使用しないと思います)

解像度

: 画面またはプリンターの解像度を検出します。 (例: 最小解像度:300dpi または最小解像度:118dpcm)。

grid

: 出力デバイスがグリッドデバイスかビットマップデバイスかを確認します。 最後に、楽しいデモのエンディングを紹介します:

1 @media screen and(min-width:960px){
2 
        Body{
        4 
        5               Background:red;
        6 
        7 
        }
        8 
        9 
        }

以上がCSS3でのメディアメディアクエリの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。