一摧找、介紹
什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)无蜂？
- 響應(yīng)式網(wǎng)頁設(shè)計(jì)使您的網(wǎng)頁在所有設(shè)備上都很好看。
- 響應(yīng)式網(wǎng)頁設(shè)計(jì)僅使用HTML和CSS檀轨。
- 響應(yīng)式網(wǎng)頁設(shè)計(jì)不是程序或JavaScript胸竞。
為所有用戶設(shè)計(jì)最佳體驗(yàn)
可以使用許多不同的設(shè)備查看網(wǎng)頁：臺(tái)式機(jī)，平板電腦和手機(jī)参萄。無論設(shè)備如何卫枝，您的網(wǎng)頁都應(yīng)該看起來不錯(cuò)，并且易于使用讹挎。
網(wǎng)頁不應(yīng)該遺漏信息以適應(yīng)較小的設(shè)備校赤，而是調(diào)整其內(nèi)容以適應(yīng)任何設(shè)備：
當(dāng)您使用CSS和HTML調(diào)整大小吆玖，隱藏，縮小马篮，放大或移動(dòng)內(nèi)容以使其在任何屏幕上看起來都很好時(shí)沾乘，它被稱為響應(yīng)式網(wǎng)頁設(shè)計(jì)。
二积蔚、視窗
什么是視窗意鲸？
視窗是用戶在網(wǎng)頁上的可見區(qū)域。 視窗因設(shè)備而異尽爆，并且在手機(jī)上比在計(jì)算機(jī)屏幕上小怎顾。 在平板電腦和移動(dòng)電話之前，網(wǎng)頁僅針對(duì)計(jì)算機(jī)屏幕設(shè)計(jì)漱贱，并且網(wǎng)頁通常具有靜態(tài)設(shè)計(jì)和固定大小槐雾。 然后，當(dāng)我們開始使用平板電腦和手機(jī)上網(wǎng)時(shí)幅狮，固定大小的網(wǎng)頁太大而無法適應(yīng)視窗募强。為了解決這個(gè)問題，這些設(shè)備上的瀏覽器按比例縮小整個(gè)網(wǎng)頁以適應(yīng)屏幕崇摄。 這不完美!!只是快速修復(fù)擎值。
設(shè)置視窗
HTML5引入了一種方法，讓網(wǎng)頁設(shè)計(jì)師通過<meta>標(biāo)簽控制視窗逐抑。 您應(yīng)該在所有網(wǎng)頁中包含以下<meta>viewport元素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta>
viewport元素為瀏覽器提供有關(guān)如何控制頁面尺寸和縮放的說明鸠儿。 width = device-width部分將頁面寬度設(shè)置為遵循設(shè)備的屏幕寬度（具體取決于設(shè)備）。 initial-scale = 1.0部分設(shè)置瀏覽器首次加載頁面時(shí)的初始縮放級(jí)別厕氨。 以下是沒有視窗元標(biāo)記的網(wǎng)頁示例进每，以及具有視窗元標(biāo)記的同一網(wǎng)頁：
視窗大小內(nèi)容
用戶用于在桌面和移動(dòng)設(shè)備上垂直滾動(dòng)網(wǎng)站 - 但不是水平滾動(dòng)！ 因此命斧，如果用戶被迫水平滾動(dòng)或縮小田晚，以查看整個(gè)網(wǎng)頁，則會(huì)導(dǎo)致糟糕的用戶體驗(yàn)国葬。 一些額外的規(guī)則要遵循：
- 不要使用大的固定寬度元素 - 例如贤徒，如果圖像的寬度比視窗寬，則可能導(dǎo)致視口水平滾動(dòng)汇四。請(qǐng)記住調(diào)整此內(nèi)容以適合視窗的寬度接奈。
- 不要讓內(nèi)容依賴于特定的視口寬度來渲染 - 由于CSS像素中的屏幕尺寸和寬度在不同設(shè)備之間變化很大，因此內(nèi)容不應(yīng)依賴于特定的視口寬度來渲染船殉。
- 使用CSS媒體查詢?yōu)樾∑聊缓痛笃聊粦?yīng)用不同的樣式 - 為頁面元素設(shè)置大的絕對(duì)CSS寬度將導(dǎo)致元素對(duì)于較小設(shè)備上的視口而言太寬。相反斯嚎，請(qǐng)考慮使用相對(duì)寬度值利虫，例如寬度：100％挨厚。另外，請(qǐng)注意使用大的絕對(duì)定位值糠惫。它可能導(dǎo)致元素落在小型設(shè)備上的視口之外疫剃。
三、網(wǎng)格視圖
什么是網(wǎng)格視圖硼讽？
許多網(wǎng)頁都基于網(wǎng)格視圖巢价，這意味著頁面分為以下幾列：
在設(shè)計(jì)網(wǎng)頁時(shí)，使用網(wǎng)格視圖非常有用固阁。它可以更輕松地在頁面上放置元素壤躲。
響應(yīng)式網(wǎng)格視圖通常有12列，總寬度為100％备燃，并在調(diào)整瀏覽器窗口大小時(shí)縮小和展開碉克。
構(gòu)建響應(yīng)式網(wǎng)格視圖
讓我們開始構(gòu)建響應(yīng)式網(wǎng)格視圖。 首先確保所有HTML元素都將box-sizing屬性設(shè)置為border-box并齐。這可確保填充和邊框包含在元素的總寬度和高度中漏麦。
在CSS中添加以下代碼：
* {
box-sizing: border-box;
}
以下示例顯示了一個(gè)簡單的響應(yīng)式網(wǎng)頁，其中包含兩列：
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
如果網(wǎng)頁只包含兩列况褪，則上面的示例很好撕贞。 但是，我們希望使用具有12列的響應(yīng)式網(wǎng)格視圖测垛，以便更好地控制網(wǎng)頁捏膨。 首先，我們必須計(jì)算一列的百分比：100％/ 12列= 8.33％赐纱。
然后我們?yōu)?2列中的每一列創(chuàng)建一個(gè)類脊奋，class =“col-”和一個(gè)定義該段應(yīng)該跨越多少列的數(shù)字：
.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%;}
所有這些列應(yīng)該浮動(dòng)到左側(cè)，并且填充為15px：
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
每行應(yīng)包含在<div>中疙描。行內(nèi)的列數(shù)應(yīng)始終加起來為12：
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>
行內(nèi)的列全部浮動(dòng)到左側(cè)诚隙，因此從頁面流中取出，其他元素將被放置起胰，就好像列不存在一樣久又。為了防止這種情況，我們將添加一個(gè)清除流程的樣式：
.row::after {
content: "";
clear: both;
display: block;
}
我們還想添加一些樣式和顏色以使其看起來更好：
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;
}
請(qǐng)注意效五，當(dāng)您將瀏覽器窗口調(diào)整為非常小的寬度時(shí)地消，示例中的網(wǎng)頁看起來不太好。在下一章中畏妖，您將學(xué)習(xí)如何解決這個(gè)問題脉执。
** 四、媒體查詢
什么是媒體查詢戒劫？
媒體查詢是CSS3中引入的CSS技術(shù)半夷。 僅當(dāng)某個(gè)條件為真時(shí)婆廊，它才使用@media規(guī)則包含一個(gè)CSS屬性塊。
如果瀏覽器窗口小于500px巫橄，背景顏色將變?yōu)闇\藍(lán)色：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
添加斷點(diǎn)
在本教程的前面淘邻，我們創(chuàng)建了一個(gè)包含行和列的網(wǎng)頁，它具有響應(yīng)性湘换，但在小屏幕上看起來不太好宾舅。
媒體查詢可以提供幫助。我們可以添加一個(gè)斷點(diǎn)彩倚，其中設(shè)計(jì)的某些部分在斷點(diǎn)的每一側(cè)都會(huì)表現(xiàn)不同筹我。
使用媒體查詢?cè)?68px處添加斷點(diǎn)：
當(dāng)屏幕（瀏覽器窗口）小于768px時(shí)，每列的寬度應(yīng)為100％：
/* 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%;
}
}
始終為移動(dòng)優(yōu)先設(shè)計(jì)
移動(dòng)優(yōu)先意味著在為桌面設(shè)備或任何其他設(shè)備進(jìn)行設(shè)計(jì)之前設(shè)計(jì)移動(dòng)設(shè)備（這將使頁面在較小的設(shè)備上顯示得更快）署恍。 這意味著我們必須在CSS中進(jìn)行一些更改崎溃。 當(dāng)寬度小于768px時(shí)，我們應(yīng)該在寬度大于768px時(shí)更改設(shè)計(jì)盯质，而不是更改樣式袁串。這將使我們的設(shè)計(jì)移動(dòng)優(yōu)先：
/* 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%;}
}
另一個(gè)斷點(diǎn)
您可以根據(jù)需要添加任意數(shù)量的斷點(diǎn)。 我們還將在平板電腦和手機(jī)之間插入一個(gè)斷點(diǎn)呼巷。
我們通過添加一個(gè)媒體查詢（600px）和一組大于600px（但小于768px）的設(shè)備的新類來完成此操作：
請(qǐng)注意囱修，這兩組類幾乎相同，唯一的區(qū)別是名稱（
col-和col-m-）：
/* 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的機(jī)會(huì)破镰，決定每個(gè)斷點(diǎn)處的列會(huì)發(fā)生什么：
對(duì)于桌面： 第一部分和第三部分將分別跨越3列。中間部分將跨越6列压储。 對(duì)于平板電腦 第一部分將跨越3列鲜漩，第二部分將跨越9列，第三部分將顯示在前兩部分下方集惋，它將跨越12列：
<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>
方向：縱向/橫向
媒體查詢還可用于根據(jù)瀏覽器的方向更改頁面的布局孕似。 您可以擁有一組僅在瀏覽器窗口寬度超過其高度時(shí)應(yīng)用的CSS屬性，即所謂的“橫向”方向：
如果方向處于橫向模式刮刑，則網(wǎng)頁將具有淺藍(lán)色背景：
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
五喉祭、圖片
不同設(shè)備的不同圖像
大型圖像在大型計(jì)算機(jī)屏幕上可以是完美的，但在小型設(shè)備上卻無用雷绢。為什么在必須縮小尺寸時(shí)加載大圖像崔兴？要減少負(fù)載或出于任何其他原因赘理，您可以使用媒體查詢?cè)诓煌O(shè)備上顯示不同的圖像芜果。 這是一個(gè)大圖像和一個(gè)較小的圖像暮刃，將顯示在不同的設(shè)備上：
[圖片上傳失敗...(image-9e8c0e-1558712457675)]
/* 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來檢查設(shè)備寬度，而不是瀏覽器寬度。然后鹉究，在調(diào)整瀏覽器窗口大小時(shí)圖像不會(huì)更改：
/* 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>元素中捆，可以讓您定義多個(gè)圖像。
瀏覽器支持
[圖片上傳失敗...(image-674c78-1558712457675)]
<picture>元素的工作方式類似于<video>和<audio>元素坊饶。您設(shè)置了不同的源，第一個(gè)符合首選項(xiàng)的源是正在使用的源：
<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規(guī)則中找到的媒體查詢染厅。 您還應(yīng)該為不支持<picture>元素的瀏覽器定義<img>元素痘绎。
