先上結(jié)論：

//vw頁面寬度，7.5(設(shè)計(jì)稿是750px) 就等于 百分百的寬度除以設(shè)計(jì)稿750px再除以100 
//這里的100是我想相對設(shè)計(jì)稿縮小一百倍，例如：圖片寬40px 高20px 寫成 0.4rem  0.2rem就好了
html{font-size: calc(100vw / 7.5);}

關(guān)于css中的單位

我們都知道在css中的單位，一般都包括有px，%，em等單位，另外css3新增加一個(gè)單位rem。
其中px，%等單位平時(shí)在傳統(tǒng)布局中使用的鼻尖頻繁，不過px單位在進(jìn)行自適應(yīng)布局的過程中顯得力不從心，大部分的解決方案是使用%為單位配合@media媒體查詢來進(jìn)行自適應(yīng)布局。不過還有另外一個(gè)css3新增的單位來做自適應(yīng)布局。那就是我們今天的豬腳 （手動(dòng)狗頭）rem；

em和rem的區(qū)別與聯(lián)系呢

首先是我們的em，這個(gè)單位我們是根據(jù)其父元素的字體大小來進(jìn)行計(jì)算的，即1em為他父元素的字體大小，ps：父元素的字體大小是20px，那么子元素的1em就是20px。3em就是60px；我們使用最多的就是首行縮進(jìn)：text-indent:1em; （hiahiahia） 是不是很熟悉呢？但是因?yàn)檫@個(gè)東西只能根據(jù)他的父元素來進(jìn)行計(jì)算，使用起來就涉及到很多的計(jì)算，所以我們實(shí)際項(xiàng)目中使用的次數(shù)非常有限。
css3針對這種情況就推出了一個(gè)新的單位rem（閃亮登場，自帶bgm）：rem的使用方式和em類似，只不過em是針對父元素的字體大小來進(jìn)行計(jì)算的，而rem則是針對根元素即HTML這個(gè)標(biāo)簽的字體大小來進(jìn)行計(jì)算的，在這種情況下加入HTML的字體大小為20px則在頁面中所有元素的1rem就是20px，以此類推...

使用rem進(jìn)行自適應(yīng)布局----簡單的自動(dòng)適配所有屏幕

使用rem進(jìn)行自適應(yīng)布局的關(guān)鍵就是給html賦值一個(gè)動(dòng)態(tài)的font-size,在這里我們可以在頁面dom加載完畢之后使用js獲取到頁面高度（寬度也可以），然后將其除以一個(gè)固定的定量，比如20，然后再將結(jié)果賦值給html的font-size，這樣我們就得到了一個(gè)會根據(jù)頁面寬度（高度）的變化而不斷變化的值，這個(gè)值就是1rem。

//頁面大小出現(xiàn)變化的時(shí)候再次獲取新的font-size值 
$(window).resize(function(){
setHtmlFontSize(20);
}) //初始化執(zhí)行 setHtmlFontSize(20);
//動(dòng)態(tài)設(shè)置html元素的font-size的方法 function setHtmlFontSize(num){ //頁面的寬度，其中17為頁面默認(rèn)的導(dǎo)航條的寬度 var _w=document.documentElement.clientWidth-17;
$('html').css('fontSize',_w/num); }

可能看了這個(gè)例子你們還是不太明白，那我就再舉個(gè)例子吧（翹尾巴啦）。
上面的代碼中，先使用js獲取頁面的高度（寬度），除以20之后，再把這個(gè)值賦值給html的font-size，得到一個(gè)根據(jù)頁面高度變化而變化的單位1rem，這個(gè)時(shí)候假設(shè)我們拿到的設(shè)計(jì)稿是640px，我們將其除以20，那么我們就得到在頁面高度為640px的情況下1rem就是32px，如果設(shè)計(jì)圖中的圖片部分寬度是320px，高度是160px，這個(gè)部分需要自適應(yīng)，那么我們就可以給這個(gè)圖片寬度 320/32=10rem，而高度就是160/32=5rem。這樣賦值之后假如頁面的寬度就是640px，那么圖片的尺寸就是320px*160px，寬度是屏幕尺寸的一半，高度為1/4，這個(gè)時(shí)候假如屏幕寬度變?yōu)?280px，那這個(gè)時(shí)候頁面中1rem代表的尺寸就變成了1280/20=64px。圖片的尺寸就變成了相應(yīng)的640px 320px，寬度依然是屏幕尺寸的一半，高度為1/4。這樣就實(shí)現(xiàn)了一個(gè)非常簡單自適應(yīng)布局賦值。
通過這種動(dòng)態(tài)的設(shè)定HTML的font-size之后，我們可以很輕易的給頁面上任何地方，例如width,height,padding,margin設(shè)置大小，并且這個(gè)都是自適應(yīng)的哦！

關(guān)于calc()

在進(jìn)行自適應(yīng)布局的時(shí)候會碰到有的地方需要固定寬高，比如一個(gè)div寬度為屏幕尺寸的一半，但是在10px的padding，那在這種情況下，假如我們直接給寬度50%，或者計(jì)算完之后的rem單位，再給padding，因?yàn)楹心Ｐ偷年P(guān)系導(dǎo)致寬度為50%+20px。但是又因?yàn)?0%是一個(gè)不固定的值，導(dǎo)致很難計(jì)算出一個(gè)具體的值，在這種情況下我們就可以使用css3中的一個(gè)計(jì)算方法，calc（），可以設(shè)置

div{width:calc(50% - 20px);}

這樣設(shè)置之后得到的結(jié)果就是計(jì)算之后的結(jié)果，任何需要給具體的值的地方都可以使用calc來進(jìn)行計(jì)算，不過需要主要目前此方法只能進(jìn)行+ - * /的四則運(yùn)算，并且在計(jì)算符號前后都需要有一個(gè)空格。當(dāng)然上面的50%也可以換成計(jì)算之后的rem單位。

注意點(diǎn):
calc 內(nèi)部的表達(dá)式，在使用運(yùn)算符號時(shí)，兩遍必須加上空格（雖然乘除可以無視，但還是建議帶上）?。。。?！，不然會解析錯(cuò)誤?。⊙菔驹谧钌线?/p>