關於css中的單位
大家都知道在css中的單位，一般都包括有px,%,em等單位，另外css3新增加乙個單位rem。
其中px，%等單位平時在傳統布局當中使用的比較頻繁，大家也比較熟悉，不過px單位在進行自適應布局的過程當中則會有些力不從心，大部分的解決方案是使用%為單位配合@media媒介查詢來進行自適應布局。不過還有另外乙個css3新新增的單位也同樣可以拿來進行自適應布局，在我看來這種方法也更加方便直觀。
em和rem
首先先介紹一下em，這個單位是根據其父元素的字型大小來進行計算的，即1em為其父元素的字型大小，例如父元素的字型大小為12px則其子元素的1em為12px，2em則為24px。但是因為其只能針對父元素來進行計算，使用起來因為涉及到大量的運算，很不方便，因此平時使用不是很多。
css3針對這種情況在css3的規範下推出了乙個新的單位rem，rem的使用方式和em類似，只不過em是基於其父元素的字型大小來進行計算，而rem則是針對根元素即html這個標籤的字型大小來進行計算，在這種情況下假如html的字型大小為12px則在頁面中左右元素的1個rem即為12px，2rem為24px。
用rem進行自適應布局——–簡單的自動適配所有螢幕
使用rem進行自適應布局的關鍵就是給html賦值乙個動態的font-size，在這裡我們可以在頁面dom載入完畢之後使用js獲取到頁面寬度（高度也可以），然後將其除以乙個固定的定量，比如20，然後將結果賦給html的font-size，這樣我們就得到了乙個會根據頁面寬度的變化而不斷變化的值，這個值即是1rem。**如下：
//頁面大小出現變化的時候再次獲取新的font-size值 $(window).resize(function
()) //初始化執行 sethtmlfontsize(20);
//動態設定html元素的font-size的方法 function
sethtmlfontsize
(num)
舉個例子，我們先用js獲取頁面的寬度，除以20進行計算之後，把這個值賦給html的font-size，得到乙個根據頁面寬度變化而變化的單位1rem，這個時候假如我們拿到的設計稿的寬度是640px，將其除以20，這樣我們就得到在頁面寬度為640px的情況下1rem即為32px，如果設計稿中的banner圖部分的寬度是320px，而高度則是160px，這個部分需要進行自適應，那麼我們就可以給這個banner圖寬度為320/32=10rem，而高度為160/32=5rem。這樣賦值之後假如頁面的寬度就是640px，那banner的尺寸為320px160px，寬度是螢幕尺寸的一半，高度為1/4，這個時候假如螢幕變寬為1280px，那這個時候頁面中1rem所代表的尺寸就變成了1280/20=64px，banner的尺寸變成了相應的640px320px，寬度依然是螢幕尺寸的一半，高度為1/4.這樣就非常簡單的實現了自適應的布局賦值。
通過這種動態的設定html的font-size的值之後，我們可以很輕易的給頁面上任何地方，例如padding，width，height，margin設定大小，並且這個大小都是自適應的。
關於calc()
在進行自適應布局的時候有時候會碰到需要有給固定寬高的地方，比如乙個div寬度為螢幕尺寸的一半，但是有10px的padding，那在這種情況下假如我們直接給寬度50%，或者計算完之後的rem單位，再給padding,.因為盒模型的關係導致其寬度為50%+20px。但是又因為50%是乙個不固定的值，導致很難計算出乙個具體的值，在這種情況下我們就可以使用css3中的乙個計算方法，calc（），可以設定
div這樣設定之後得到的結果就是計算之後的結果，任何需要給具體的值的地方都可以使用calc來進行計算，不過需要主要目前此方法只能進行+ - * /的四則運算，並且在計算符號前後都需要有乙個空格。當然上面的50%也可以換成計算之後的rem單位。
注意點:
calc 內部的表示式，在使用運算符號時，兩遍必須加上空格（雖然乘除可以無視，但還是建議帶上）！！！！！，不然會解析錯誤！！，看演示寫法
width:calc(10 * 10px);
width:calc(50% - 50px);
width:calc(50% + 5em);
width:calc(10% / 1rem);
結論
使用rem單位以及calc（）方法在進行自適應布局非常強大，可以配合媒介查詢，可以非常靈活的控制各種元素的自適應。
如何使用rem單位
最近搞移動端，真是被rem em與px的換算要了老命了，看了不少文件，似乎弄明白了，這不今天用又矇圈了。好多文件上老是說用rem就給html設定font size，用em就給body設定font size 看了下bootstrap樣式表，html body 其他樣式略哈，就講這兩個主要的。可惜大姐長...
如何使用新單位rem
手機端需加上第一條，pc無視 1 需要先加上 手機端獲取物理裝置尺寸 1 2 viewport content width device width,minimum scale 1,maximum scale 5,user scalable no 獲取手機端物理裝置尺寸 2 先初始化頁面預設的字型大...
rem單位使用法
css3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在w3c官網上是這樣描述rem的 font size of the root element 下面我們就一起來詳細的了解rem。前面說了 em 是相對於其父元素來設定字型大小的，這樣就會存在乙個問題，進行任何元素設定，都有可能需要知...