メディア CSS3 のメディアクエリ

メディア クエリは主にレスポンシブ Web ページで使用されます。

1. 初期化設定:

Webページの上部のタグに次の文を挿入します:

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

この文はレスポンシブの初期化設定を行います。 Web ページには主に以下が含まれます:

name="viewport": 表示デバイスをビューポートとしてマークします。

width = device-width: 幅は現在のデバイスの幅と同じです。初期スケーリング比率 (デフォルト設定は 1.0);

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

maximum-scale: ユーザーがズームできる最大比率 (デフォルト設定は 1.0);
ユーザースケーラブル: ユーザーが手動でズームできるかどうか (デフォルト設定は 1.0)、ユーザーがページをズームインまたはズームアウトすることを望まないためです。

2. IE ブラウザの互換性の問題を解決します:

IE ブラウザ (IE8) は HTML5 および CSS3 のメディアをサポートしていないため、IE ブラウザの互換性問題を解決するために使用される JS ファイルをロードする必要があります:

<!--[if lt IE 9]>

	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

rree

	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

2つの<script></script>タグ内のsrc属性が指すファイルリンクアドレスは、ローカル参照にダウンロードせずに、別の場所から直接参照できるファイルです。

3. IE のレンダリング モードを最高に設定します。

現在、多くの人の IE ブラウザが IE9 以降にアップグレードされています。たとえば、IE9 ブラウザでは、多くの奇妙なことが起こります。しかし、ブラウザのドキュメント モードは IE8 です。この状況を防ぐために、IE のドキュメント モードを常に最新にするために次のコードが必要です:

<![endif]-->

もちろん、より強力な書き方があります:

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

。

このコードの後に​​ chrome=1 が追加されます。これは、Google Chrome Frame (Google Embedded Browser Framework GCF) が原因で、ユーザーのコンピュータにこの Chrome プラグインがインストールされている場合、コンピュータの IE ブラウザはバージョン要因を回避できます。組版と計算には Webkit エンジンと V8 エンジンを使用します。もちろん、ユーザーがこのプラグインをインストールしない場合、このコードにより IE ブラウザは最上位のドキュメント モードで効果を表示します。

4. CSS3 メディア メディア クエリの記述方法:

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

これは、CSS ファイルでは、次の CSS コードを実行することを意味します。具体的な内容は当面は問わない。

上記のコードの画面の場合、ページを印刷するときにセリフ フォントを使用し、画面に表示するときにサンセリフ フォントを使用するようにデバイスに指示することを意味します。現在、多くの Web サイトでは画面が直接省略されているため、ユーザーが Web ページを印刷する必要性を考慮する必要がないため、別の書き方があります:

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

厳密な思考の原則に沿って、私は個人的にはこれを使用しません書き方。

5. CSS3 メディア クエリ本文コードの組み合わせ:

レスポンシブ Web ページ レイアウトでは、メディア クエリ コードの組み合わせを継続的に使用する必要があります。主な機能は、適応された画面の幅を決定し、さまざまな状況に応じて異なる CSS を適用することです。幅のスタイル。

たとえば、画面幅が 960px の場合、Web ページの背景色を赤に変更します。

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

たとえば、画面幅が最大 960px (960px 未満) の場合、背景色を変更しますWeb ページの色を黒にします:

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

画面の幅が少なくとも 960px (960px より大きい) の場合、Web ページの背景色をオレンジに変更します:

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

より一般的なのは、次のような混合使用です。画面幅が 960px から 1200px の場合と同様に、Web ページの背景色をオレンジ色に変更します。黄色は

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

6. 全体的な開発アイデア:

CSS3 でメディア クエリを使用する一般的なアイデアは、さまざまなデバイスにおける Web ページの幅の範囲は 3 つ (PC、タブレット、携帯電話)、および 4 つのタイプ (PC、タブレット、中および大画面の携帯電話、小画面の携帯電話) が存在する可能性があります。もちろん、2 種類だけの場合もあります (別バージョンを開発する場合、タブレット、携帯電話、PC 側を CSS3 メディア クエリのオブジェクトとして使用する必要はありません)。また、さまざまな幅の必要なページ要素に異なる CSS スタイルを適用するためさまざまなデバイスに適応する範囲。

7. レスポンシブ Web 開発における幅の問題:

実際の開発では、通常、レスポンシブ Web ページの最大幅を設定する必要があります。最大幅が無視されると、Web ページのレイアウトが肥大化したり断片化したりして、視覚的なフラッディングが発生します。非常に低く見えるとよく言われます。

また、現在の表示デバイスでの Web ページの幅についてもお話しましょう (スペースの問題のため、産業革命については説明しません) 現在最も一般的な幅は基本的に次のとおりです: PC 側は 960 ピクセル (1920 ピクセル) 以上です。 、1600px、1440px、1280px、1140px、960px）、960pxから640px（768px、640px）までのタブレット、および640px（480px、320px）未満の携帯電話 上記の幅は以前から存在しており、Webページの幅です。ディスプレイデバイスではこの状態が長期間続くため、レスポンシブ Web ページの幅のデザインに関しては、基本的にこれらのサイズを考慮するだけで十分です。

8. メディア メディア クエリのすべてのパラメーターの概要:

メディア クエリには、次のような、一般的に使用されない関連関数も含まれています:

width: ブラウザーに表示される幅、
height: ブラウザーの視覚的な高さ、
device-width: デバイス画面の幅、
device-height: デバイス画面の高さ、
orientation: デバイスが現在横向きモードか縦向きモードかを検出します、

• aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，

• device-aspect-ratio:检测设备的宽度和高度的比例，

• color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），

• color-index:检查设备颜色索引表中的颜色（他的值不能是负数），

• monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），

• resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

• grid：检测输出的设备是网格的还是位图设备。

9.扩展——在CSS2中同样有媒体查询：

media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：

在HTML文件中的标签中写入这句：

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

以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，

如要判断移动设备是否为纵向放置的显示屏，可以这样写：

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

如要让小于960px的页面执行指定的CSS样式文件，可以这样写：

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

当然，CSS2中的媒体查询方法放到现在并不推荐使用，最大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。

更多CSS3中的media媒体查询相关文章请关注PHP中文网！