CSS3 メディア クエリの使用の概要

まず、Media を使用する場合、モバイル デバイスの表示効果と互換性があるように次のコードを設定する必要があります:

準備 1: Meta タグを設定する

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

このコードのいくつかのパラメーターの説明:

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

• initial-scale: 初期のスケーリング比率 (デフォルト設定は 1.0)

• minimum-scale: ユーザーが設定する最小比率ズームできるかどうか (デフォルト設定は 1.0)

• maximum-scale: ユーザーがズームできる最大比率 (デフォルトは 1.0 に設定されています)

• user-scalable: ユーザーが手動でズームできるかどうかズーム (デフォルトは no です。ユーザーにページをズームインおよびズームアウトさせたくないからです)

準備 2: 互換性のあるファイルをロードする JS

IE8 は HTML5 も CSS3 メディアもサポートしていないため、コードの互換性を確保するには、2 つの JS ファイルをロードする必要があります:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

準備 3: デフォルトの IE レンダリング モードを最高に設定します (この部分を追加するかどうかを選択できます)

現在、多くの人の IE ブラウザ には、 IE9 以降にアップグレードされているため、現時点では奇妙なことがたくさんあります。たとえば、現在ブラウザは IE9 ですが、ブラウザのドキュメント モードは IE8 です:

この状況を防ぐために、 IE のドキュメント モードを常に最新の状態にするには、次のコードが必要です:

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

もっと良い書き方があります:

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

このコードの後に​​ chrome=1 が追加されているのはなぜですか、この Google Chrome Frame (Google 埋め込みブラウザ) FrameworkGCF)、一部のユーザーがコンピューターにこの Chrome をインストールしている場合、このプラグインを使用すると、バージョンに関係なく、コンピューターの IE が植字と計算に Webkit エンジンと V8 エンジンを使用できるようになります。ユーザーがこのプラグインをインストールしない場合、このコードにより IE が最高速度で実行されます。このコードを使用することをお勧めしますが、コードなしで使用することもできます。

CSS3 メディアの記述方法を入力します:

まず次のコードを見てみましょう。レスポンシブ Web サイトの CSS では、以下のようなコードをよく目にすると推測されます

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }}

これは、CSS3 の標準的な記述方法と見なされるべきです。 media 、上記の CSS コードは、ページが 960px より小さい場合、その下の CSS を実行することを意味します。これについては大きな疑問はありません。

上記のコードには画面があることに気づく人もいるかもしれません。これは、ページを印刷するときにセリフ フォントを使用し、画面に表示するときにサンセリフ フォントを使用するようにデバイスに指示することを意味します。しかし今では、多くの Web サイトが画面を直接省略していることがわかりました。Web サイトではユーザーが印刷するときを考慮する必要がない可能性があるため、次のように直接書くことができます:

@media (max-width: 960px){
    body{
        background: #ccc;
    }}

次に、ブラウザのサイズが 960px より大きい場合のコードがあります:

@media screen and (min-width:960px){
    body{
        background:orange;
    }}

us 上記の使用法を混合することもできます:

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }}

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

メディアの全パラメータのまとめ

上記は、最も頻繁に使用する必要があるメディアクエリの3つの特徴、より大きい、等しい、より小さいという記述方法です。メディア ククエリーの完全な機能は、間違いなくこれら 3 つの機能以上のものです。パラメータの使用方法の説明をいくつかまとめます。

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

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

• device-width: デバイスの画面の幅。

• device-height: デバイスの画面の高さ。

• 方向: デバイスが現在横向きか縦向きステータスかどうかを確認します。

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

• device-aspect-ratio: デバイスの幅と高さの比率を検出します。

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

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

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

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

• grid: 出力デバイスがグリッドデバイスかビットマップデバイスかを確認します。

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