響應式設計是指在不同分辨率的設備中，網頁布局可以自適應的調整。這種彈性化的布局使網站在不同設備中的布局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站兼容手機和平板。簡單理解就是可以讓一個網站兼容多個終端，而不是為每個終端做一個特定的版本，響應式設計是移動設備快速崛起下的產物，這個概念就是為了解決移動互聯網而誕生的。大部分響應式網頁都是通過媒體查詢，根據不同的媒體設備從而加載不同樣式的 CSS 文件來實現的。
1、響應式 Web 設計 - Viewport
(1)、什么是 Viewport？
viewport 翻譯為中文為"視區/視窗/視口"，就是指用戶網頁的可視區域。手機瀏覽器是把頁面放在一個虛擬的 viewport 中，通常這個虛擬的 viewport 比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中，這樣會破壞沒有針對手機瀏覽器優化的網頁的布局，用戶可以通過平移和縮放來查看網頁的不同部分。
(2)、設置 Viewport
一個常用的針對移動網頁優化過的頁面的 viewport <meta> 元素大致如下：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
代碼解析：
width：控制 viewport 的大小，可以是指定的一個值，比如 1920，或者是特殊的值，如 device-width 為設備的寬度，單位為縮放為 100% 時的 CSS 的像素。
height：和 width 相對應，指定高度，可以是指定的一個值，比如 1080，或者是特殊的值，如 device-height 為設備的高度。
initial-scale：初始縮放比例，即當頁面第一次載入是時縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。
2、 響應式 Web 設計 - CSS 柵格系統
(1)、什么是柵格系統？
柵格系統也叫做網格視圖，即通過固定的格子結構，來進行設計布局網頁，響應式設計就是網格視圖的實現方式。
很多網頁都是基於網格設計的，這說明網頁是按列來布局的。使用網格視圖有助於我們設計網頁，這讓我們向網頁添加元素變的更簡單。
響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器窗口大小調整時會自動伸縮。如下：
響應式設計就是讓一個網站兼容多個終端，即為一個頁面設計多種布局結構，分別適配不同屏幕尺寸的設備，就像下圖顯示這樣：
通過上圖，不難發現一個頁面可以拆分成多個區塊，而這些區塊就構成了網頁的布局，根據不同的屏幕尺寸，調整這些區塊的排版，就可以實現響應式設計。此外，通過對比上圖中不同設備的區塊位置，當屏幕寬度較大時，區塊傾向於水平分布，而當屏幕縮小時，區塊則傾向於垂直堆疊。
(2)、創建響應式網格視圖
首先確保所有的 HTML 元素都有 box-sizing 屬性且設置為 border-box。該屬性允許以確切的方式定義適應某個區域的具體內容。當值為 border-box 時，為元素設定的寬度和高度決定了元素的邊框盒。也就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
確保邊距和邊框包含在元素的寬度和高度間，可以添加如下代碼：
1 *{ 2 box-sizing:border-box; 3 }
下面的例子，是一個簡單的響應式網頁，包含兩列：
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>
上例中的響應式設計只包含兩列。12 列的網格系統可以更好的控制響應式網頁。
首先我們可以計算每列的百分比：100% / 12 列 = 8.33%，在每列中指定 class， class="col-" 用於定義每列有幾個 span：
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>
代碼解析：
每一行使用 <div> 包裹，所有列數加起來應為 12：
1 <div class="row"> 2 <div class="col-3">...</div> 3 <div class="col-9">...</div> 4 </div>
指定所有的列向左浮動，間距（padding）為 15px：
1 [class*="col-"]{ 2 padding:15px; 3 border:1px solid red; 4 float:left; 5 }
因為設置了浮動，所以需要清除浮動的影響，使用 :after 偽元素來清除浮動：
1 .row:after{ 2 content:""; 3 display:block; 4 clear:both; 5 }
最后給這個簡單的響應式網頁添加一些樣式和顏色，可在 Chrome 的開發者工具中或在 Firefox 的開發者中選擇響應式設計視圖，調整顯示設備的尺寸來查看效果。
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 padding:15px; 13 background-color:#9933cc; 14 color:#ffffff; 15 } 16 /* 所有列左浮動 */ 17 [class*="col-"]{ 18 float:left; 19 padding:15px; 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 41 .menu ul{ 42 list-style-type:none; 43 margin:0; 44 padding:0; 45 } 46 .menu li{ 47 padding:8px; 48 margin-bottom:7px; 49 background-color:#33b5e5; 50 color:#ffffff; 51 box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 52 } 53 .menu li:hover{ 54 background-color:#0099cc; 55 } 56 </style> 57 </head> 58 <body> 59 <div class="header"> 60 <h1>頁頭</h1> 61 </div> 62 <div class="row"> 63 <!-- <div class="menu"> --> 64 <div class="col-3 menu"> 65 <ul> 66 <li>菜單 1</li> 67 <li>菜單 2</li> 68 <li>菜單 3</li> 69 <li>菜單 4</li> 70 </ul> 71 </div> 72 <!-- <div class="main"> --> 73 <div class="col-9"> 74 <h2>內容</h2> 75 <p>響應式設計是指在不同分辨率的設備中，網頁布局可以自適應的調整。這種彈性化的布局使網站在不同設備中的布局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站兼容手機和平板。</p> 76 <p>響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器窗口大小調整時會自動伸縮。</p> 77 </div> 78 </div> 79 </body> 80 </html>
3、響應式 Web 設計 - 媒體查詢
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
(1)、CSS3 @media 查詢
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
注意：IE9+ 以及所有瀏覽器都支持 @media 規則。
CSS 語法：
1 @media mediatype and|not|only (media feature){ 2 ... 3 }
你也可以針對不同的媒體使用不同 stylesheets：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">
下面的例子，如果瀏覽器窗口小於 600px，背景將變為淺藍色：
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 body{ 9 background-color:lightgreen; 10 } 11 @media only screen and (max-width:600px){ 12 body{ 13 background-color:lightblue; 14 } 15 } 16 </style> 17 </head> 18 <body> 19 <p>調整瀏覽器尺寸，當頁面的寬度小於 600 像素，背景會變為淺藍色，否則為淺綠色。</p> 20 </body> 21 </html>
(2)、添加斷點
在之前網格視圖的例子中使用行和列來制作網頁，雖然他是響應式的，但通過調整瀏覽器的尺寸，可以發現他在小屏幕上並不能友好的展示。通過媒體查詢就可以很好的解決這個問題。我們可以在樣式表中添加斷點，不同的斷點有不同的效果。
下面的例子，使用媒體查詢在 768px 添加斷點，當屏幕/瀏覽器窗口小於 768px，每一列的寬度是 100%：
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 .col-1{width:8.33%;} 60 .col-2{width:16.66%;} 61 .col-3{width:25%;} 62 .col-4{width:33.33%;} 63 .col-5{width:41.66%;} 64 .col-6{width:50%;} 65 .col-7{width:58.33%;} 66 .col-8{width:66.66%;} 67 .col-9{width:75%;} 68 .col-10{width:83.33%;} 69 .col-11{width:91.66%;} 70 .col-12{width:100%;} 71 72 @media only screen and (max-width: 768px){ 73 /* 移動設備： */ 74 [class*="col-"]{ 75 width: 100%; 76 } 77 } 78 </style> 79 </head> 80 <body> 81 <div class="header"> 82 <h1>頁頭</h1> 83 </div> 84 <div class="row"> 85 <div class="col-3 menu"> 86 <ul> 87 <li>菜單 1</li> 88 <li>菜單 2</li> 89 <li>菜單 3</li> 90 <li>菜單 4</li> 91 </ul> 92 </div> 93 <div class="col-6"> 94 <h2>內容</h2> 95 <p>響應式設計是指在不同分辨率的設備中，網頁布局可以自適應的調整。這種彈性化的布局使網站在不同設備中的布局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站兼容手機和平板。</p> 96 <p>響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器窗口大小調整時會自動伸縮。</p> 97 </div> 98 <div class="col-3 right"> 99 <div class="sidebar"> 100 <h2>Viewport</h2> 101 <p>viewport 翻譯為中文為"視區/視窗/視口"，就是指用戶網頁的可視區域。</p> 102 <h2>CSS 柵格系統</h2> 103 <p>柵格系統也叫做網格視圖，即通過固定的格子結構，來進行設計布局網頁，響應式設計就是網格視圖的實現方式。</p> 104 <h2>媒體查詢</h2> 105 <p>使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。</p> 106 </div> 107 </div> 108 </div> 109 <div class="footer"> 110 <p>頁腳</p> 111 </div> 112 </body> 113 </html>
(3)、為移動端優先設計
移動端優先意味着在設計桌面和其他設備時優先考慮移動端的設計，這就意味着必須對 CSS 做一些改變。
上面的例子在屏幕小於 768px 進行樣式修改，同樣移動端優先就是在屏幕寬度大於 768px 時修改樣式。
下面的代碼，是移動端優先設計：
1 /* 移動端優先: */ 2 [class*="col-"]{ 3 width:100%; 4 } 5 @media only screen and (min-width: 768px){ 6 /* 桌面： */ 7 .col-1{width:8.33%;} 8 .col-2{width:16.66%;} 9 .col-3{width:25%;} 10 .col-4{width:33.33%;} 11 .col-5{width:41.66%;} 12 .col-6{width:50%;} 13 .col-7{width:58.33%;} 14 .col-8{width:66.66%;} 15 .col-9{width:75%;} 16 .col-10{width:83.33%;} 17 .col-11{width:91.66%;} 18 .col-12{width:100%;} 19 }
(4)、其他斷點
可以根據實際的需求添加斷點，同樣也可以為平板設備和移動設備設置斷點。
下面的代碼，在屏幕為 600px 時添加媒體查詢，並設置新的樣式（屏幕大於 600px 但小於 768px）：
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 </style> 95 </head> 96 <body> 97 <div class="header"> 98 <h1>頁頭</h1> 99 </div> 100 <div class="row"> 101 <!-- <div class="col-3 menu"> --> 102 <div class="col-3 col-m-3 menu"> 103 <ul> 104 <li>菜單 1</li> 105 <li>菜單 2</li> 106 <li>菜單 3</li> 107 <li>菜單 4</li> 108 </ul> 109 </div> 110 <!-- <div class="col-6"> --> 111 <div class="col-6 col-m-9"> 112 <h2>內容</h2> 113 <p>響應式設計是指在不同分辨率的設備中，網頁布局可以自適應的調整。這種彈性化的布局使網站在不同設備中的布局都比較合理，可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，其根本理念是使原本 PC 上的網站兼容手機和平板。</p> 114 <p>響應式網格視圖通常是 12 列，寬度為 100%，在瀏覽器窗口大小調整時會自動伸縮。</p> 115 </div> 116 <!-- <div class="col-3 right"> --> 117 <div class="col-3 col-m-12 right"> 118 <div class="sidebar"> 119 <h2>Viewport</h2> 120 <p>viewport 翻譯為中文為"視區/視窗/視口"，就是指用戶網頁的可視區域。</p> 121 <h2>CSS 柵格系統</h2> 122 <p>柵格系統也叫做網格視圖，即通過固定的格子結構，來進行設計布局網頁，響應式設計就是網格視圖的實現方式。</p> 123 <h2>媒體查詢</h2> 124 <p>使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。</p> 125 </div> 126 </div> 127 </div> 128 <div class="footer"> 129 <p>頁腳</p> 130 </div> 131 </body> 132 </html>
注意：上面代碼中，平板和桌面兩組類樣式是相同的，但名稱不同 col- 和 col-m-，這看起來很多余，但是他們可以根據屏幕大小自動設置不同的樣式，所以還是非常必要的。如下：
1 <div class="row"> 2 <div class="col-3 col-m-3">...</div> 3 <div class="col-6 col-m-9">...</div> 4 <div class="col-3 col-m-12">...</div> 5 </div>
針對桌面設備：第一和第三部分跨 3 列，中間部分跨 6 列。
針對平板設備：第一部分跨 3列，第二部分跨 9 列，第三部分跨 12 列。
(5)、方向：橫屏/豎屏
結合 CSS 媒體查詢，可以創建適應不同設備的方向（橫屏 landscape、豎屏 portrait 等）的布局。
語法：
orientation：portrait | landscape
portrait：指定輸出設備中的頁面可見區域高度大於或等於寬度。
landscape：除 portrait 值情況外，都是 landscape。
下面的例子，如果是橫屏則背景顯示為淺藍色：
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 body{ 9 background-color:lightgreen; 10 } 11 12 @media only screen and (orientation:landscape){ 13 body{ 14 background-color:lightblue; 15 } 16 } 17 </style> 18 </head> 19 <body> 20 <p>調整瀏覽器尺寸，當頁面的寬度大於高度時，背景會變為淺藍色，否則為淺綠色。</p> 21 </body> 22 </html>
4、響應式 Web 設計 - 圖片
(1)、使用 width 屬性
如果 width 屬性設置為 100%，圖片會根據上下范圍實現響應式功能：
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 img{ 9 width:100%; 10 height:auto; 11 } 12 </style> 13 </head> 14 <body> 15 <img src="images/xi.jpg" width="300" height="200"> 16 <p>可以調整瀏覽器窗口，查看圖片是如何擴展的。</p> 17 </body> 18 </html>
注意：上面的例子，圖片會比它的原始圖片大，在 Chrome 中顯示如下：
擴大或縮小瀏覽器窗口，圖片也會相應的調整自身大小，可以使用 max-width 屬性很好的解決這個問題。
(2)、使用 max-width 屬性
如果 max-width 屬性設置為 100%，圖片永遠不會大於其原始大小：
1 img{ 2 max-width:100%; 3 height:auto; 4 }
同樣的窗口大小，在 Chrome 中顯示如下：
不管如何調整瀏覽器窗口大小，他始終都顯示原始圖片大小。
(3)、在網頁中添加圖片
將上面例子中的圖片，添加到媒體查詢為移動端優先設計的響應式網頁中：
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 img{ 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 <img src="images/xi.jpg" width="300" height="200"> 121 </div> 122 <!-- <div class="col-3 right"> --> 123 <div class="col-3 col-m-12 right"> 124 <div class="sidebar"> 125 <h2>Viewport</h2> 126 <p>viewport 翻譯為中文為"視區/視窗/視口"，就是指用戶網頁的可視區域。</p> 127 <h2>CSS 柵格系統</h2> 128 <p>柵格系統也叫做網格視圖，即通過固定的格子結構，來進行設計布局網頁，響應式設計就是網格視圖的實現方式。</p> 129 <h2>媒體查詢</h2> 130 <p>使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。</p> 131 </div> 132 </div> 133 </div> 134 <div class="footer"> 135 <p>頁腳</p> 136 </div> 137 </body> 138 </html>
(4)、背景圖片
背景圖片可以響應調整大小或縮放。
以下是三個不同的方法：
①、如果 background-size 屬性設置為 "contain"，背景圖片將按比例自適應內容區域，圖片保持其比例不變：
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>背景圖片-1</title> 7 <style> 8 div{ 9 width:100%; 10 height:400px; 11 background:url('images/xi.jpg') no-repeat; 12 background-size:contain; 13 border:2px solid red; 14 } 15 </style> 16 </head> 17 <body> 18 <p>調整瀏覽器大小查看效果。</p> 19 <div></div> 20 </body> 21 </html>
在 Chrome 中顯示如下：
②、如果 background-size 屬性設置為 "100% 100%" ，背景圖片將延展覆蓋整個區域：
1 div{ 2 width:100%; 3 height:400px; 4 background:url('images/xi.jpg') no-repeat; 5 background-size:100% 100%; 6 border:2px solid red; 7 }
在 Chrome 中顯示如下：
③、如果 background-size 屬性設置為 "cover"，則會把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。注意該屬性保持了圖片的比例，因此背景圖像的某些部分無法顯示在背景定位區域中：
1 div{ 2 width:100%; 3 height:400px; 4 background:url('images/xi.jpg') no-repeat; 5 background-size:cover; 6 border:2px solid red; 7 }
在 Chrome 中顯示如下：
(5)、不同設備顯示不同圖片
大尺寸圖片可以顯示在大屏幕上，但在小屏幕上確不能很好顯示。因此沒有必要在小屏幕上去加載大圖片，這樣很影響加載速度。所以可以使用媒體查詢，根據不同的設備顯示不同的圖片。
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 /* 設備小於 400px：*/ 9 body{ 10 background:url('images/xi.jpg') no-repeat; 11 } 12 13 /* 設備大於 400px： */ 14 @media only screen and (min-width:400px){ 15 body{ 16 background-image: url('images/xi-big.jpg'); 17 } 18 } 19 </style> 20 </head> 21 <body> 22 <p>調整瀏覽器寬度，背景圖片在小於 400 px 時將改變。</p> 23 </body> 24 </html>
當設備寬度大於 400px 時，在 Firefox 的響應式設計視圖中顯示如下：
當設備寬度小於 400px 時，在 Firefox 的響應式設計視圖中顯示如下：
你可以使用媒體查詢的 min-device-width 替代 min-width 屬性，它將檢測的是設備寬度而不是瀏覽器寬度。注意：瀏覽器大小重置時，圖片大小不會改變。
1 /* 設備小於 400px：*/ 2 body{ 3 background:url('images/xi.jpg') no-repeat; 4 } 5 6 /* 設備大於 400px： */ 7 @media only screen and (min-device-width:400px){ 8 body{ 9 background-image: url('images/xi-big.jpg'); 10 } 11 }
(6)、HTML5 <picture> 元素
HTML5 的 <picture> 元素可以設置多張圖片，該元素用來處理響應式圖片。
<picture> 元素類似於 <video> 和 <audio> 元素。可以設置不同的資源，第一個設置的資源為首選使用的。
下面的例子，使用 <picture> 元素為不同的設備顯示不同的圖片：
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 屬性是可選的，對於不支持 <picture> 元素的瀏覽器可以使用 <img> 元素來替代。
注意：Chrome 和 Firefox 都支持該元素，IE 瀏覽器不支持。
雖然 IE 不支持 <picture> 元素，但是可以通過 Picturefill.js 插件來解決 IE 瀏覽器的兼容性問題。
Picturefill 是一個用於處理圖片響應式的類庫，他能夠讓你針對不同瀏覽器屏幕，加載對應的圖片元素。我們可以利用插件讓 IE 瀏覽器識別 <picture> 元素。在百度搜索 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 必須保持特定的層級結構，網格系統才能正常運行。