一、介紹
什麼是響應式網頁設計？
- 響應式網頁設計使您的網頁在所有設備上都很好看。
- 響應式網頁設計僅使用HTML和CSS。
- 響應式網頁設計不是程序或JavaScript。
爲所有用戶設計最佳體驗
可以使用許多不同的設備查看網頁：臺式機，平板電腦和手機。無論設備如何，您的網頁都應該看起來不錯，並且易於使用。
網頁不應該遺漏信息以適應較小的設備，而是調整其內容以適應任何設備：
桌面
平板
手機
當您使用CSS和HTML調整大小，隱藏，縮小，放大或移動內容以使其在任何屏幕上看起來都很好時，它被稱爲響應式網頁設計。
二、視窗
什麼是視窗？
視窗是用戶在網頁上的可見區域。 視窗因設備而異，並且在手機上比在計算機屏幕上小。 在平板電腦和移動電話之前，網頁僅針對計算機屏幕設計，並且網頁通常具有靜態設計和固定大小。 然後，當我們開始使用平板電腦和手機上網時，固定大小的網頁太大而無法適應視窗。爲了解決這個問題，這些設備上的瀏覽器按比例縮小整個網頁以適應屏幕。 這不完美!!只是快速修復。
設置視窗
HTML5引入了一種方法，讓網頁設計師通過<meta>標籤控制視窗。 您應該在所有網頁中包含以下<meta>viewport元素：
1 2 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta> |
viewport元素爲瀏覽器提供有關如何控制頁面尺寸和縮放的說明。 width = device-width部分將頁面寬度設置爲遵循設備的屏幕寬度（具體取決於設備）。 initial-scale = 1.0部分設置瀏覽器首次加載頁面時的初始縮放級別。 以下是沒有視窗元標記的網頁示例，以及具有視窗元標記的同一網頁：
沒有視窗元標記
有視窗元標記
視窗大小內容
用戶用於在桌面和移動設備上垂直滾動網站 - 但不是水平滾動！ 因此，如果用戶被迫水平滾動或縮小，以查看整個網頁，則會導致糟糕的用戶體驗。 一些額外的規則要遵循：
- 不要使用大的固定寬度元素 - 例如，如果圖像的寬度比視窗寬，則可能導致視口水平滾動。請記住調整此內容以適合視窗的寬度。
- 不要讓內容依賴於特定的視口寬度來渲染 - 由於CSS像素中的屏幕尺寸和寬度在不同設備之間變化很大，因此內容不應依賴於特定的視口寬度來渲染。
- 使用CSS媒體查詢爲小屏幕和大屏幕應用不同的樣式 - 爲頁面元素設置大的絕對CSS寬度將導致元素對於較小設備上的視口而言太寬。相反，請考慮使用相對寬度值，例如寬度：100％。另外，請注意使用大的絕對定位值。它可能導致元素落在小型設備上的視口之外。
三、網格視圖
什麼是網格視圖？
許多網頁都基於網格視圖，這意味着頁面分爲以下幾列：
在設計網頁時，使用網格視圖非常有用。它可以更輕鬆地在頁面上放置元素。
響應式網格視圖通常有12列，總寬度爲100％，並在調整瀏覽器窗口大小時縮小和展開。
構建響應式網格視圖
讓我們開始構建響應式網格視圖。 首先確保所有HTML元素都將box-sizing屬性設置爲border-box。這可確保填充和邊框包含在元素的總寬度和高度中。
在CSS中添加以下代碼：
1 2 3 |
* {
box-sizing: border-box;
}
|
以下示例顯示了一個簡單的響應式網頁，其中包含兩列：
1 2 3 4 5 6 7 8 |
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
|
如果網頁只包含兩列，則上面的示例很好。 但是，我們希望使用具有12列的響應式網格視圖，以便更好地控制網頁。 首先，我們必須計算一列的百分比：100％/ 12列= 8.33％。
然後我們爲12列中的每一列創建一個類，class =“col-”和一個定義該段應該跨越多少列的數字：
1 2 3 4 5 6 7 8 9 10 11 12 |
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
|
所有這些列應該浮動到左側，並且填充爲15px：
1 2 3 4 5 |
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
|
每行應包含在<div>中。行內的列數應始終加起來爲12：
1 2 3 4 |
<div class="row"> <div class="col-3">...</div> <div class="col-9">...</div> </div> |
行內的列全部浮動到左側，因此從頁面流中取出，其他元素將被放置，就好像列不存在一樣。爲了防止這種情況，我們將添加一個清除流程的樣式：
1 2 3 4 5 |
.row::after {
content: "";
clear: both;
display: block;
}
|
我們還想添加一些樣式和顏色以使其看起來更好：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
|
請注意，當您將瀏覽器窗口調整爲非常小的寬度時，示例中的網頁看起來不太好。在下一章中，您將學習如何解決這個問題。
** 四、媒體查詢
什麼是媒體查詢？
媒體查詢是CSS3中引入的CSS技術。 僅當某個條件爲真時，它才使用@media規則包含一個CSS屬性塊。
如果瀏覽器窗口小於500px，背景顏色將變爲淺藍色：
1 2 3 4 5 |
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
|
添加斷點
在本教程的前面，我們創建了一個包含行和列的網頁，它具有響應性，但在小屏幕上看起來不太好。
媒體查詢可以提供幫助。我們可以添加一個斷點，其中設計的某些部分在斷點的每一側都會表現不同。
桌面
手機
使用媒體查詢在768px處添加斷點：
當屏幕（瀏覽器窗口）小於768px時，每列的寬度應爲100％：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
|
始終爲移動優先設計
移動優先意味着在爲桌面設備或任何其他設備進行設計之前設計移動設備（這將使頁面在較小的設備上顯示得更快）。 這意味着我們必須在CSS中進行一些更改。 當寬度小於768px時，我們應該在寬度大於768px時更改設計，而不是更改樣式。這將使我們的設計移動優先：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
|
另一個斷點
您可以根據需要添加任意數量的斷點。 我們還將在平板電腦和手機之間插入一個斷點。
桌面
平板
手機
我們通過添加一個媒體查詢（600px）和一組大於600px（但小於768px）的設備的新類來完成此操作：
請注意，這兩組類幾乎相同，唯一的區別是名稱（col-和col-m-）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
|
我們有兩組完全相同的類似乎很奇怪，但它給了我們HTML的機會，決定每個斷點處的列會發生什麼：
對於桌面： 第一部分和第三部分將分別跨越3列。中間部分將跨越6列。 對於平板電腦 第一部分將跨越3列，第二部分將跨越9列，第三部分將顯示在前兩部分下方，它將跨越12列：
1 2 3 4 5 |
<div class="row"> <div class="col-3 col-m-3">...</div> <div class="col-6 col-m-9">...</div> <div class="col-3 col-m-12">...</div> </div> |
方向：縱向/橫向
媒體查詢還可用於根據瀏覽器的方向更改頁面的佈局。 您可以擁有一組僅在瀏覽器窗口寬度超過其高度時應用的CSS屬性，即所謂的“橫向”方向：
如果方向處於橫向模式，則網頁將具有淺藍色背景：
1 2 3 4 5 |
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
|
五、圖片
不同設備的不同圖像
大型圖像在大型計算機屏幕上可以是完美的，但在小型設備上卻無用。爲什麼在必須縮小尺寸時加載大圖像？要減少負載或出於任何其他原因，您可以使用媒體查詢在不同設備上顯示不同的圖像。 這是一個大圖像和一個較小的圖像，將顯示在不同的設備上：
1 2 3 4 5 6 7 8 9 10 11 |
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
|
您可以使用媒體查詢min-device-width而不是min-width來檢查設備寬度，而不是瀏覽器寬度。然後，在調整瀏覽器窗口大小時圖像不會更改：
1 2 3 4 5 6 7 8 9 10 11 |
/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
|
HTML5<picture>元素
HTML5引入了<picture>元素，可以讓您定義多個圖像。
瀏覽器支持
<picture>元素的工作方式類似於<video>和<audio>元素。您設置了不同的源，第一個符合首選項的源是正在使用的源：
1 2 3 4 5 |
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture> |
srcset屬性是必需的，它定義了圖像的來源。 media屬性是可選的，並接受您在CSS @media規則中找到的媒體查詢。 您還應該爲不支持<picture>元素的瀏覽器定義<img>元素。