CSS 響應式設計

時間 2019-12-10

標籤 css 響應設計欄目 CSS 简体版

原文原文鏈接

　　響應式設計是指在不一樣分辨率的設備中，網頁佈局能夠自適應的調整。這種彈性化的佈局使網站在不一樣設備中的佈局都比較合理，能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，其根本理念是使本來 PC 上的網站兼容手機和平板。簡單理解就是可讓一個網站兼容多個終端，而不是爲每一個終端作一個特定的版本，響應式設計是移動設備快速崛起下的產物，這個概念就是爲了解決移動互聯網而誕生的。大部分響應式網頁都是經過媒體查詢，根據不一樣的媒體設備從而加載不一樣樣式的 CSS 文件來實現的。css

一、響應式 Web 設計 - Viewport

　　(1)、什麼是 Viewport？html

　　viewport 翻譯爲中文爲"視區/視窗/視口"，就是指用戶網頁的可視區域。手機瀏覽器是把頁面放在一個虛擬的 viewport 中，一般這個虛擬的 viewport 比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中，這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局，用戶能夠經過平移和縮放來查看網頁的不一樣部分。前端

　　(2)、設置 Viewportweb

　　一個經常使用的針對移動網頁優化過的頁面的 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：初始縮放比例，即當頁面第一次載入是時縮放比例。
async

　　maximum-scale：容許用戶縮放到的最大比例。ide

　　minimum-scale：容許用戶縮放到的最小比例。

　　user-scalable：用戶是否能夠手動縮放。

二、響應式 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>

三、響應式 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>

四、響應式 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 中顯示以下：

五、響應式 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>

六、響應式 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 必須保持特定的層級結構，網格系統才能正常運行。