響應式佈局

一個網站同時適配多種設備和多個屏幕，讓網站的佈局隨用戶的使用環境而變化，大大提高了用戶友好性

1.viewport（視口）

用於呈現網頁的區域； 電腦端的視口寬度等於分辨率，而移動端的視口寬度默認值是設備廠家指定的； 手機端視口通常設爲980px，可是字會變得很是小，解決該問題須要以下代碼

<meta name="viewport"
content="width=device-width //視口爲設備寬度,不設置的話默認爲980px initial-scale=1.0 //初始化的視口大小是1.0倍 maximum-scale=1.0 //最大倍數是1.0倍 user-scalable=0" //不容許縮放窗口
/> 
複製代碼

2.圖片

img {
max-width: 100%;
}
複製代碼

用 width:100% 圖片會被拉伸

3.手機瀏覽器內核

兼容的前綴：
-webkit-
-ms-
-moz-
-o-
複製代碼

4.流式佈局（百分比佈局，彈性盒佈局）

百分比可以設置的屬性是

width（相對父的width）
height（相對父的height）
padding（相對父的width）
margin（相對父的width）
複製代碼

其餘屬性好比border、font-size不能用百分比設置的。

5.媒體查詢（@media）

查詢如今看這個網頁的設備是什麼，以及它的寬度是多少

body {
    background-color: grey;
 } 
@media screen and (min-width:1200px){
    body{
        background-color: pink;
    }
}
 @media screen and (min-width:700px) and (max-width:1200px){
    body{
    background-color: blue;
    }
}
@media screen and (max-width:700px){
    body{
    background-color: orange;
        }
}
//screen表示看這個網頁的設備是顯示器
複製代碼

IE六、七、8不支持媒體查詢，也爲了防止手機端的某些瀏覽器不支持媒體查詢，因此不要把全部的選擇器都放在媒體查詢裏面。

6.rem響應式佈局

• 通常不要給元素設置具體的寬度,可是對於一些小圖標能夠設定具體寬度值

• 高度值能夠設置固定值,設計稿有多大,咱們就嚴格寫多大

• 全部設置的固定值都用REM作單位(首先在HTML中設置一個基準值：PX和REM的對應比例,而後在效果圖上獲取PX值,佈局的時候轉化爲REM值)

• JS獲取真實屏幕的寬度,讓其除以設計稿的寬度,算出比例,把以前的基準值按照比例進行從新的設定,這樣項目就能夠在移動端自適應了

摘自（blog.csdn.net/vhwfr2u02q/…