CSS3 メディアクエリの使用の概要-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-10-19 10:19:24

オリジナル

858 人が閲覧しました

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

準備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 つの機能以上のものです。ここでは、そのパラメーターの使用方法の一部を要約して説明します。