検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 メディア クエリの使用の概要

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

WBOY
WBOYオリジナル
2016-10-19 10:19:24861ブラウズ

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

準備1：メタタグを設定する

リーリー

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

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

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

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

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

  • ユーザースケーラブル: ユーザーが手動でズームできるかどうか (ユーザーにページをズームインおよびズームアウトさせたくないため、デフォルトは「いいえ」に設定されています)

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

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

リーリー

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

現在、多くの人の IE ブラウザが IE9 以降にアップグレードされているため、現在ブラウザは IE9 ですが、ブラウザのドキュメント モードは IE8:

など、この時点で多くの奇妙なことが起こります。

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

リーリー

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

リーリー

このコードの後に​​ chrome=1 が追加されているのはなぜですか? この Google Chrome Frame (Google Embedded Browser Framework GCF) がコンピュータにインストールされている場合、IE のバージョンに関係なく、つまり、植字と計算に Webkit エンジンと V8 エンジンを使用できます。これは非常に強力です。ただし、ユーザーがこのプラグインをインストールしない場合、このコードは IE に最上位のドキュメントで効果を表示させます。モード。このコードを使用することをお勧めしますが、コードなしで使用することもできます。

CSS3 メディアの書き込み方法を入力してください:

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

。
リーリー

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

上記のコードには

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

リーリー
次に、ブラウザのサイズ

が960pxより大きい場合のコードがあります:

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

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

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

上記は、最も使用する必要があるメディアクエリの 3 つの特性、「以上」、「等しい」、「未満」の記述方法です。メディア ククエリーの完全な機能は、間違いなくこれら 3 つの機能以上のものです。ここでは、そのパラメーターの使用方法の一部を要約して説明します。

  • 幅:

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

  • 高さ

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

  • device-width

    : デバイスの画面の幅。

  • device-height

    : デバイスの画面の高さ。

  • 方向

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

  • aspect-ratio

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

  • device-aspect-ratio

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

  • color

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

  • color-inde

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

  • モノクロ

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

  • 解像度

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

  • grid

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

    • 転載元:
520UED

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLのいくつかのタグを学ぶ次の記事：HTMLのいくつかのタグを学ぶ

関連記事

続きを見る