前端之響應式布局

就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本，可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗。

在標頭檔案中新增乙個meta標籤

其中，width = device-width 這一句的意思是讓頁面的寬度等於螢幕的寬度。

rem 指的是 html 元素的 font-size，html 元素的 font-size 預設是 16px，所以 1 rem = 16px；然後根據 rem 來計算各個元素的寬高，然後配合 media query 就可以實現自適應。

例項1：

當頁面寬度小於等於960px執行下面的css

@ media  screen  and  (max-width: 960px)

注意：範圍大的要放在上面，範圍小的放在下面。假設有兩個樣式，乙個適應 360px 以下，乙個適應 640px 以下，如果 360px 的放在上面，但是小於 360px 同樣滿足小於 640px，這就不是我們想要的結果了，所以範圍大的需要放在上面。

html

img, object

這裡宣告max-width規則，就是要保證所有最大顯示為其自身的100%（即最大只可以顯示為自身那麼大）。此時，如果包含的元素（比如包含的body或div）比固有寬度小，會縮放佔滿最大可用空間。

2. js

addloadevent(function() );