メディア クエリは主にレスポンシブ 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>
<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;
}
}@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. メディア メディア クエリのすべてのパラメーターの概要:
メディア クエリには、次のような、一般的に使用されない関連関数も含まれています:
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中文网！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
