響應式布局

1，responsive layout 響應式布局。核心兩個點是響應式設計和自適應設計。

2，斷點和流體。斷點是指不同類型的頁面的解析度分類。流體是指具體的展示局部情況，

3， <meta content="

// 將設備的寬度賦值給頁面寬度

width_=device=width,

// 默認的頁面縮放比例是1.0

initial-scale=1.0,

// 最大的頁面縮放比例是1.0

maximum-scale=1.0,

// 禁用用戶縮放

user-scale=0;

// 屬性名稱命名為viewport

" name="viewport">

4， @media 媒體查詢 示例：

<style type="text/css">

@media screen and (max-width: 320px){

/*some css width <= 320 */

}

@media screen and (min-width: 480px){

/*some css* width >= 480px */

}

@media screen and (min-width: 320px) and (max-width: 480px){

/* some css the width between 320px and 480px;*/

}

</style>

5，從px到rem，基於頁面根節點的大小進行縮放。

比較暴力的代碼如下圖所示:(基於750px的視覺稿，實際尺寸/100=實際rem值)

一般使用業界比較常用的框架來實現

flexible.js 一個基於設備ppi和client width來計算rem的布局框架。

使用rem的缺點：可能會存在小數，但是px是最小單位。

6，calc

calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

calc()能做什麼？calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。