一、響應式開發
1. 響應式佈局
web網頁開發的頁面佈局大致出現了以下幾類：
- 固定寬度的佈局：給網頁設置一個固定的寬度，通常以px作爲單位，常見於PC端web開發。
- 流式佈局：給網頁設置一個相對寬度，通常以百分比作爲單位。
- 柵格佈局：像表格一樣對頁面進行劃分，以每一個劃分出的單元格爲長度單位，比如bootstrap採用的就是柵格化的佈局。
- 響應式佈局：通過檢測設備信息來決定網頁的佈局方式，從而使網頁可以匹配大部分移動設備和PC端。
2. 響應式開發
響應式開發的結果將是開發出一個能夠在多種設備上都能正常展示的網站，響應式開發的網站意味着多種終端共用一套代碼，節省了開發時間，節約了開發成本和維護成本，但同時，它也存在一些缺陷，因爲共用一套代碼，因此其中部分內容即使移動端並不會展示，但它同樣會請求並下載下來，這將拖慢移動端網站的運行速度，使用戶的流量開銷更大，同時，因爲要適配不同類型的終端，因此我們不得不寫很多冗餘的代碼，使網站的體積更大。
因此我們要學會針對不同的網站選擇不同的開發方式，對於一些博客、官網、新聞等網站，展示內容單一簡單，適合使用響應式開發，但是針對一些功能複雜的網站，則不適合。
二、媒體查詢
實現響應式佈局的一個方法是使用媒體查詢，媒體查詢即針對不同的設備使用不同的代碼，一般的常見設備的尺寸劃分如下：
| 類型 | 佈局寬度 |
|---|---|
| 大屏幕 | 大於等於1200px |
| 默認 | 大於等於980px |
| 平板 | 大於等於768px |
| 手機到平板 | 小於等於767px |
| 手機 | 小於等於480px |
媒體查詢建議的幾個查詢區間：
1. css語法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype ，即查詢的媒體類型，有以下幾種：
重點關注screen。
media feature，即查詢的媒體功能，有以下取值：
重點關注device-width和max-width。
示例：
@media screen and (max-width:768px) {
.body{
background-color: #EB7350;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
.body{
background-color: yellow;
}
}
@media screen and (min-width:992px) and (max-width:1200px) {
.body{
background-color: red;
}
}
@media screen and (min-width:1200px) {
.body{
background-color: gray;
}
}
考慮到樣式覆蓋問題，上面的代碼可以做如下改進：
@media screen and (max-width:768px) {
.divs{
background-color: #EB7350;
}
}
@media screen and (min-width:768px) {
.divs{
background-color: yellow;
}
}
@media screen and (min-width:992px) {
.divs{
background-color: red;
}
}
@media screen and (min-width:1200px) {
.divs{
background-color: gray;
}
}
媒體查詢的兩個特點：向上兼容、向下覆蓋。
向上兼容即min-width爲768px的樣式，在min-width爲992px時依然生效，向下覆蓋即下面的樣式會覆蓋到上面的重複樣式。
書寫規則：
- 如果是判斷最小值（min-width），從小到大寫。
- 如果是判斷最大值（max-width），從大到小寫。
min-width與min-device-width的區別：
min-width是指當前可視區域的最小寬度，min-device-width是指當前設備的最小寬度，（設備的最小寬度不會因爲你縮放瀏覽器而發生改變，因此對於採用device-width的響應式佈局，在PC端縮放瀏覽器時不會發生響應式變化）
2. 通過媒體查詢調用css文件
<link rel="stylesheet" media="screen and (min-width:992px)" href="./css/base.css" />
三、px與em與rem
px：像素，固定的長度單位，不適合用於響應式開發。
em：長度單位，參照當前元素的字號，如果未設置則參照父容器的字號或者當前瀏覽器的默認字號。
rem：參照根元素(即html)的長度單位。
rem使用舉例：
@media screen and (device-width:320px){
html{
font-size:16px;
}
}
@media screen and (device-width:360px){
html{
font-size:18px;
}
}
@media screen and (device-width:375px){
html{
font-size:18.75px;
}
}
@media screen and (device-width:414px){
html{
font-size:20.07px;
}
}
div{
width:10rem;
height:10rem;
}
這種情況下，div塊在不同屏幕下將會有不同的大小，在320px的設備下，寬高爲160px；在360px的設備下，寬高爲180px；從而很好的適配各種屏幕。