利点:
異なる解像度のデバイスに対応する高い柔軟性
マルチデバイスのディスプレイ適応の問題を迅速に解決できます
欠点:
との互換性さまざまなデバイス、重い作業負荷、低効率
コードが煩雑で、隠れた無駄な要素が表示され、ロード時間が長くなります
実際には、これは妥協的な設計ソリューションであり、多くの要因の影響を受け、最良の結果を達成することはできません
元々のWebサイトのデザインをある程度変更している レイアウト構造がユーザーの混乱を招く
CSS3中的Media Query（媒介查询）Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。根据视窗的大小自动调整布局。**1、通过不同的媒体类型和条件定义样式表规则。**媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面**2、Media能获得的值**设备的宽和高: device-width,device-height显示屏幕/触觉设备渲染窗口的宽和高: width，heigth显示屏幕/触觉设备设备的手持方向: orientation(portrait|lanscape) 横向/竖向 画面比例: aspect-ratio 浏览器的长宽比屏幕比例: device-aspect-ratio 设备屏幕的长宽比，如4/3,16/9等。视觉媒体: color 定义每一组输出设备的彩色原件个数，如果不是彩色设备，则值等于0分辨率: resolution 定义设备的非暴力，如:96dpi,300dpi以上仅仅orientation不支持max,min.**3、可用设备参数名**all 所有设备braille 盲文embossed 盲文打印handheld 手持设备print 文档打印或者打印预览模式projection项目演示(如幻灯片)screen 彩色电脑屏幕tty 固定字母间距的网络媒体，如电传打字机**4、逻辑关键字**only 限定某种设备类型and 逻辑与，连接设备名与选择条件、选择条件1与选择条件2not 排除某种设备(除了什么之外), 设备列表 **5、语法结构及用法**@media 设备名 only (选取条件) not (选取条件) and (设备选取条件), 设备二{sRules}在link中使用@media:<link rel = "stylesheet" type = "text/css" media = "only screen and (max-width： 640px),only screen and (max-device-width： 640px)" href = “home.css”/> だけは省略可能です。 Web ページの最大幅は 640 であること、2 番目の条件はデバイスの最大幅が 640 ピクセルであることです。
@media (min-device-width:1024px) および (max-width:989px)、screen および (max-device-width:480px)、(max-device-width:480px) および (orientation:landscape)、( min-device-width:480px) および (max-device-width:1024px) および (orientation:portrait) {//code}
コンピューターの画面サイズは 1024 ピクセル以上であり、表示される最大幅は最大 989 ピクセルです。デバイスの幅は 480px で、水平に配置した場合は 480px 以上、垂直に配置した場合は 1024px 未満になります。
文字はスペースで接続され、選択条件は括弧内に含まれ、コードは設定されたスタイルシートであり、角括弧内に含まれます。 (特定のデバイスを制限する、省略可能) および (論理 AND) のみが論理キーワードであり、複数のデバイスはカンマで区切られます
6. レスポンシブ レイアウトのテスト レスポンシブ レイアウトの要件さまざまなデバイスでテストする場合は、ブラウジング ツールを使用して、さまざまなサイズの小さな画面での表示効果を確認できます。さまざまな画面サイズで Web サイトの効果を閲覧するのに役立つツール - Responsivator http://sensitive.d3corp.com/?d3corp.com
7. レスポンシブ レイアウト デザイン
/*浏览器的可视区域不小于980px*/ @media screen and (min-width:980px){ .head{width:100%; height:70px; } .head #logo{position:fixed; top:0px; left:50px;} .head nav{ width:870px;background:#fff;height:70px; margin:0 auto;} .head nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; } }/*浏览器的可视区域在640px和980px之间*/ @media screen and (min-width:640px) and (max-width:980px){ .head{width:70px;height:870px;} .head nav{ width:70px;background:#fff;height:870px;margin-top:20px;} .head nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; } }/*浏览器的可视区域小于640px*/ @media screen and (max-width:640px){ .head{width:256px; height:256px;position:fixed; bottom:20px; left:20px;} .head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;} .head nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;} .head nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; }
/* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust： none; } /* 设置HTML5元素为块 */ article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section { display： block; } width を decice-width に設定します
<meta name="viewport" content="width=device-width; initial-scale=1.0">
width – ビューポートの幅
height – ビューポートの高さ、このプロパティはほとんど使用されません
Initial-scale – 初期のスケーリング率
minimum-スケール - ユーザーにズームを許可する最小比率
最大スケール - ユーザーがズームを許可する最大比率
ユーザー スケーラブル - ユーザーが手動でズームできるかどうか (いいえまたははい)
最後に、メディア クエリが有効な場合について説明します。 IE ブラウザではサポートされていないため、メディア クエリを使用できます。JavaScript で解決するには、ページの先頭で css3-mediaqueries.js を参照するだけです。例:
IE8 以前のバージョンのブラウザが CSS3 メディア クエリをサポートしていない問題の解決策
また、IE8 以前のバージョンの互換性の問題については、以下を参照してください:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
