ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS レスポンシブ デザイン_html/css_WEB-ITnose
CSS レスポンシブ デザイン_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:511343ブラウズ
レスポンシブデザインとは、解像度が異なるデバイスでもWebページのレイアウトを適応的に調整できることを意味します。この柔軟なレイアウトにより、さまざまなデバイスで Web サイトのレイアウトがより合理的になり、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザー エクスペリエンスを提供できます。基本的なアイデアは、もともと PC 上にあった Web サイトを携帯電話やタブレットにも対応させることです。 。簡単に理解すると、Web サイトは端末ごとに特定のバージョンを作成するのではなく、複数の端末に対応できるということです。この概念は、モバイル デバイスの急速な普及によって生まれました。ほとんどのレスポンシブ Web ページは、さまざまなメディア デバイスに応じてさまざまなスタイルの CSS ファイルを読み込むメディア クエリを通じて実装されています。
1. レスポンシブ Web デザイン - ビューポート(1).
ビューポートは中国語で「ビューエリア/ウィンドウ/ビューポート」と訳され、ユーザーのWebページの可視領域を指します。モバイル ブラウザは、ページを仮想ビューポートに配置します。通常、この仮想ビューポートは画面よりも広いため、各 Web ページを小さなウィンドウに押し込む必要がなく、モバイル ブラウザ用に最適化されていない Web ページのレイアウトが破壊されます。では、ユーザーはパンやズームを行って Web ページのさまざまな部分を表示できます。
(2), Set Viewport
モバイル Web ページ用に最適化された一般的に使用されるページの viewport e8e496c15ba93d81f6ea4fe5f55a2244 要素はおおよそ次のとおりです:
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
コード分析:
幅: を制御viewport のサイズ。1920 などの指定された値、またはデバイスの幅である device-width などの特別な値を指定できます。単位はスケーリングが 100% の場合の CSS ピクセルです。
高さ: 幅に対応し、指定された高さは、1080 などの指定された値、またはデバイスの高さである device-height などの特別な値になります。
Initial-scale: 初期の拡大縮小率、つまりページが初めて読み込まれるときの拡大縮小率です。
maximum-scale: ユーザーがズームできる最大比率。
minimum-scale: ユーザーがズームできる最小比率。
user-scalable: ユーザーが手動でズームできるかどうか。
2. レスポンシブ Web デザイン - CSS グリッド システム(1).
グリッドシステムはグリッドビューとも呼ばれ、固定グリッド構造を使用してWebページをデザインおよびレイアウトするレスポンシブデザインはグリッドビューの実装です。
多くの Web ページはグリッドに基づいてデザインされており、Web ページは列にレイアウトされます。グリッド ビューを使用すると、Web ページのデザインに役立ち、Web ページに要素を簡単に追加できます。
レスポンシブ グリッド ビューは通常 12 列、幅 100% で、ブラウザ ウィンドウのサイズが変更されると自動的に拡大縮小されます。以下の通り：
レスポンシブデザインとは、以下の図に示すように、ウェブサイトを複数の端末に対応させること、つまり、異なる画面サイズのデバイスに適応するために、1つのページを複数のレイアウト構造で設計することです。上の図から、ページが複数のブロックに分割できることがわかります。これらのブロックが Web ページのレイアウトを構成し、さまざまな画面サイズに応じてこれらのブロックのレイアウトを調整することで、レスポンシブ デザインを実現できます。 。また、上図で各デバイスのブロック位置を比較すると、画面幅が大きい場合はブロックが横方向に分散する傾向があり、画面が狭い場合はブロックが縦方向に重なる傾向があります。
(2)、レスポンシブグリッドビューを作成する
まず、すべてのHTML要素にbox-sizing属性があり、border-boxに設定されていることを確認します。このプロパティを使用すると、特定のゾーンに適合する特定のコンテンツを正確に定義できます。値が border-box の場合、要素に設定された幅と高さによって要素の境界ボックスが決まります。つまり、要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。 要素の幅と高さの間に余白と境界線が含まれていることを確認して、次のコードを追加できます:
1 *{2 box-sizing:border-box;3 } 次の例は、2 つの列を含む単純なレスポンシブ Web ページです:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 6 <title>简单的响应式网页</title> 7 <style> 8 *{ 9 box-sizing:border-box;10 }11 .header{12 border:1px solid red;13 padding:15px;14 }15 .menu{16 width:25%;17 float:left;18 padding:15px;19 border:1px solid red;20 }21 .main{22 width:75%;23 float:left;24 padding:15px;25 border:1px solid red;26 }27 </style>28 </head>29 <body>30 <div class="header">31 <h1>页头</h1>32 </div>33 <div class="menu">34 <ul>35 <li>菜单 1</li>36 <li>菜单 2</li>37 <li>菜单 3</li>38 <li>菜单 4</li>39 </ul>40 </div>41 <div class="main">42 <h2>内容</h2>43 <p>响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。</p>44 <p>响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。</p>45 </div>46 </body>47 </html> In上の例 レスポンシブ デザインには 2 つの列のみが含まれています。 12 列のグリッド システムにより、応答性の高い Web ページをより適切に制御できます。
まず各列のパーセンテージを計算します: 100% / 12 columns = 8.33%、各列でクラスを指定し、class="col-" を使用して各列のスパン数を定義します:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 6 <title>简单的响应式网页</title> 7 <style> 8 *{ 9 box-sizing:border-box;10 }11 .header{12 border:1px solid red;13 padding:15px;14 }15 /* 所有列左浮动 */16 [class*="col-"]{17 float:left;18 padding:15px;19 border:1px solid red;20 }21 /* 清除浮动 */22 .row:after{23 content:"";24 display:block;25 clear:both;26 }27 /* 每列的百分比： */28 .col-1{width:8.33%;}29 .col-2{width:16.66%;}30 .col-3{width:25%;}31 .col-4{width:33.33%;}32 .col-5{width:41.66%;}33 .col-6{width:50%;}34 .col-7{width:58.33%;}35 .col-8{width:66.66%;}36 .col-9{width:75%;}37 .col-10{width:83.33%;}38 .col-11{width:91.66%;}39 .col-12{width:100%;}40 </style>41 </head>42 <body>43 <div class="header">44 <h1>页头</h1>45 </div>46 <div class="row">47 <!-- <div class="menu"> -->48 <div class="col-3">49 <ul>50 <li>菜单 1</li>51 <li>菜单 2</li>52 <li>菜单 3</li>53 <li>菜单 4</li>54 </ul>55 </div>56 <!-- <div class="main"> -->57 <div class="col-9">58 <h2>内容</h2>59 <p>响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。</p>60 <p>响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。</p>61 </div>62 </div>63 </body>64 </html> コード分析 :
5d728b95bfb36421c413d5aab9b8e199 元素
HTML5 的 9b66618b56ad8833e792d2ba7c315ba9 元素可以设置多张图片，该元素用来处理响应式图片。
9b66618b56ad8833e792d2ba7c315ba9 元素类似于 39000f942b2545a5315c57fa3276f220 和 b97864c2e0ef2353a16c4d64c7734e92 元素。可以设置不同的资源，第一个设置的资源为首选使用的。
下面的例子，使用 9b66618b56ad8833e792d2ba7c315ba9 元素为不同的设备显示不同的图片：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 6 <title>picture 元素</title> 7 </head> 8 <body> 9 <picture>10 <source srcset="images/xi.jpg" media="(max-width:400px)">11 <source srcset="images/xi-big.jpg">12 <img src="images/mo.jpg" alt="大漠" style="width:auto;">13 </picture>14 <p>调整浏览器宽度，背景图片在小于 400 px 时将改变。</p>15 </body>16 </html>
source 属性的必须的，用于定义图片资源。media 属性是可选的，对于不支持 9b66618b56ad8833e792d2ba7c315ba9 元素的浏览器可以使用 a1f02c36ba31691bcfe87b2722de723b 元素来替代。
注意：Chrome 和 Firefox 都支持该元素，IE 浏览器不支持。
虽然 IE 不支持 9b66618b56ad8833e792d2ba7c315ba9 元素，但是可以通过 Picturefill.js 插件来解决 IE 浏览器的兼容性问题。
Picturefill 是一个用于处理图片响应式的类库，他能够让你针对不同浏览器屏幕，加载对应的图片元素。我们可以利用插件让 IE 浏览器识别 9b66618b56ad8833e792d2ba7c315ba9 元素。在百度搜索 picturefill.js，将文件下载下来，然后在文档中引用：
1 <head>2 <script src="js/picturefill.js"></script>3 <script>4 // 通过 HTML5 shiv 方式让 IE 识别 <picture> 元素：5 document.createElement( "picture" );6 </script>7 </head>
在实际使用时，可以给引用文件的 script 元素添加一个 async 属性：
<script src="js/picturefill.js" async>
这就告诉浏览器，可以异步执行脚步，仅适用于外部脚步。
当浏览器宽度大于 400px 时，在 IE 中显示如下：
当浏览器宽度小于 400px 时，在 IE 中显示如下：
但是该方法只适用于 IE10+ 浏览器，IE9 仍然不支持，在 IE9 中显示如下：
5、响应式 Web 设计 - 视频(1)、使用 width 属性
如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>视频</title> 6 <style> 7 video{ 8 width:100%; 9 height:auto;10 }11 </style>12 </head>13 <body>14 <video width="400" controls>15 <source src="video/如果你也听说.mp4" type="video/mp4">16 <source src="video/如果你也听说.webm" type="video/webm">17 </video>18 19 <p>调整浏览器窗口大小，查看视频播放器变化。</p>20 </body>21 </html> 注意：上面的例子，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。在 Chrome 中显示如下：
(2)、使用 max-width 属性
如果 max-width 属性设置为 100%，视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：
1 video{2 max-width:100%;3 height:auto;4 } 同样的窗口大小，在 Chrome 中显示如下：
(3)、在网页中添加视频
将上面例子中的视频，添加到之前创建的媒体查询为移动端优先设计的响应式网页中。
该视频会根据 div 区域大小自动调整并占满整个 div 区域：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> 6 <title>响应式视频</title> 7 <style> 8 *{ 9 box-sizing:border-box; 10 } 11 /* 所有列左浮动 */ 12 [class*="col-"]{ 13 float:left; 14 padding:15px; 15 } 16 /* 清除浮动 */ 17 .row:after{ 18 content:""; 19 display:block; 20 clear:both; 21 } 22 .header{ 23 background-color:#9933cc; 24 color:#ffffff; 25 padding:15px; 26 } 27 .menu ul{ 28 list-style-type:none; 29 margin:0; 30 padding:0; 31 } 32 .menu li{ 33 padding:8px; 34 margin-bottom:7px; 35 background-color:#33b5e5; 36 color:#ffffff; 37 box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 38 } 39 .menu li:hover{ 40 background-color:#0099cc; 41 } 42 .sidebar{ 43 background-color:#33b5e5; 44 padding:15px; 45 color:#ffffff; 46 text-align:center; 47 font-size:14px; 48 box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 49 } 50 .footer{ 51 background-color:#0099cc; 52 color:#ffffff; 53 text-align:center; 54 font-size:12px; 55 padding:15px; 56 } 57 58 /* 移动端优先: */ 59 [class*="col-"]{ 60 width: 100%; 61 } 62 63 @media only screen and (min-width: 600px){ 64 /* 平板 */ 65 .col-m-1{width:8.33%;} 66 .col-m-2{width:16.66%;} 67 .col-m-3{width:25%;} 68 .col-m-4{width:33.33%;} 69 .col-m-5{width:41.66%;} 70 .col-m-6{width:50%;} 71 .col-m-7{width:58.33%;} 72 .col-m-8{width:66.66%;} 73 .col-m-9{width:75%;} 74 .col-m-10{width:83.33%;} 75 .col-m-11{width:91.66%;} 76 .col-m-12{width:100%;} 77 } 78 79 @media only screen and (min-width: 768px){ 80 /* 桌面： */ 81 .col-1{width:8.33%;} 82 .col-2{width:16.66%;} 83 .col-3{width:25%;} 84 .col-4{width:33.33%;} 85 .col-5{width:41.66%;} 86 .col-6{width:50%;} 87 .col-7{width:58.33%;} 88 .col-8{width:66.66%;} 89 .col-9{width:75%;} 90 .col-10{width:83.33%;} 91 .col-11{width:91.66%;} 92 .col-12{width:100%;} 93 } 94 95 video{ 96 width:100%; 97 height:auto; 98 } 99 </style>100 </head>101 <body>102 <div class="header">103 <h1>页头</h1>104 </div>105 <div class="row">106 <!-- <div class="col-3 menu"> -->107 <div class="col-3 col-m-3 menu">108 <ul>109 <li>菜单 1</li>110 <li>菜单 2</li>111 <li>菜单 3</li>112 <li>菜单 4</li>113 </ul>114 </div>115 <!-- <div class="col-6"> -->116 <div class="col-6 col-m-9">117 <h2>内容</h2>118 <p>响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。</p>119 <p>响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。</p>120 <video width="400" controls>121 <source src="video/如果你也听说.mp4" type="video/mp4">122 <source src="video/如果你也听说.webm" type="video/webm">123 </video>124 </div>125 <!-- <div class="col-3 right"> -->126 <div class="col-3 col-m-12 right">127 <div class="sidebar">128 <h2>Viewport</h2>129 <p>viewport 翻译为中文为"视区/视窗/视口"，就是指用户网页的可视区域。</p>130 <h2>CSS 栅格系统</h2>131 <p>栅格系统也叫做网格视图，即通过固定的格子结构，来进行设计布局网页，响应式设计就是网格视图的实现方式。</p>132 <h2>媒体查询</h2>133 <p>使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。</p>134 </div>135 </div>136 </div>137 <div class="footer">138 <p>页脚</p>139 </div>140 </body>141 </html> 6、响应式 Web 设计 - 框架 创建响应式网页可以使用框架来完成，比如：响应式 Web 设计框架 Bootstrap。
Bootstrap 是基于 HTML、CSS、JsvaScript 的，它简洁灵活，使得 Web 开发更加快捷，是目前最受欢迎的前端框架。
Bootstrap 中的网格和之前创建响应式网页的方式是相同的，默认分为 12 列，正确的写法如下：
1 <div class="container"> 2 <div class="row"> 3 <div class="col-sm-4"> 4 ... 5 </div> 6 <div class="col-sm-4"> 7 ... 8 </div> 9 <div class="col-sm-4">10 ...11 </div>12 </div>13 </div>
使用 Bootstrap 创建响应式网页，必须理解容器（container）、行（row）和列（column）之间的层级关系。container 是网格的容器，row（.row）必须位于 container 的内部，column（如 .col-sm-4）必须位于 row 的内部，container、row、column 必须保持特定的层级结构，网格系统才能正常运行。