rem
是指根元素（root element，html）的字型大小，從遙遠的 ie6 到 chrome 他們都約好了，根元素預設的 font-size 都是 16px。
這樣乙個新的單位相容性如何呢？
ie9+，firefox、chrome、safari、opera 的主流版本都支援了，我可以放肆的使用 rem 了。
em 的計算是基於父級元素的，在實際使用中給我們的計算帶來了很大的不便。不方便計算。所以 rem 的出現再也不用擔心父級元素的 font-size 了，因為它始終是基於根元素（html） 。
例如：html
body
p為了相容不支援 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值，這樣不支援的瀏覽器可以優雅降級。
但是，這樣寫字型並不能根據螢幕的大小進行自適應。
要實現字型自適應有兩種方法：
1、**查詢
html
@media only screen and (min-width: 481px)
}@media only screen and (min-width: 561px)
}@media only screen and (min-width: 641px)
}body
p這個效果對設計師的要求也是非常嚴格的，
例如你需要指定乙個規範的寬度進行設計，
這樣做的目的是為了在移動端能高畫質顯示。不得不說這是個非常好的東西。
我的頁面中設定了如上的**來控制不同裝置下的字型大小顯示使其達到自適應。
2、通過js去動態計算根元素的font-size，這樣的好處是所有裝置解析度都能相容適配
js去動態計算根元素的font-size
3. 有一種解決的方案，用viewport的方法。
%vw = %viewport width
我們用%vw來定義字型大小，也就是說用螢幕寬度的百分比來定義字型大小的大小。例如：
h1 這樣一來，無論螢幕寬度如何變化，h1的字型大小會保持在viewport寬度的2.5%的大小。
考慮到未來響應式設計的開發，如果你需要，瀏覽器的高度也可以基於百分比值調整。但使用基於百分比值並不總是相對於瀏覽器視窗的大小定義的最佳方式，比如字型大小不會隨著你視窗改變而改變，如今css3引入的新單位明確解決這一問題。
view demo
css3引入的」vw」和」vh」基於寬度/高度相對於視窗大小，」vw」=」view width」, 「vh」=」view height」; 以上我們稱為視窗單位允許我們更接近瀏覽器視窗來定義大小。 參照demo案例對照下面四個容器的css樣式:
.demo .demo2 .demo3 .demo4
大家可以把demo視窗收縮來檢視不同大小時候的變化。目前這款css3的應用支援所有主流瀏覽器，ie必須10以上。
給margin padding 設定rem
上面展示的是怎麼通過計算獲取到不同解析度下的html font-site百分比的值。實際開發如果設計師是按照640的寬度去設計的，我們就按照最大的640去切圖，切圖的時候如果我們要設定margin怎麼banner，設計圖的值加入是10px的間距，我們通過640的比例去計算：
margin-top:.5rem;
padding-top:1rem
上面分別是設計圖上的間距10px和20px計算成rem的方法，大家可以以此類推，如果你的設計圖是640設計的就可以用上面的方法，反正每次以最大的值來計算就可以了。
給height width 設定rem
實際開發中大家最常設定的估計就是height width值了，為了做到各個裝置下長度自己相應，許多開發人員會用百分比來做，這個是沒有問題，但是其實很多場景下用rem比百分比更加靈活，在我實際開發中，一般我只在大塊的div布局裡面用百分比，元素的設定一般都用rem來。例如：
height:100px;
width:50px;
給border 設定rem
其實就連border我們也可以用rem來做，但是貌似現在的安卓手機對border用rem單位有一小部分不支援，在我開發測試發現了，高版本的安卓瀏覽器支援，但是低版本的有許多都不支援，具體要不要使用就看你們自己的情況。
border:.2rem solid #cccccc;
總結
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...