目前使用的像素單位有：px,em,rem,vw,vh
px
px即像素，是圖像的基本采樣單位。對于不同的設(shè)備，它的圖像基本單位是不同的，比如移動端和pc端，而我們通常所說的顯示器分辨率是指桌面設(shè)定的分辨率，不是顯示器的物理分辨率。
px產(chǎn)生的像素問題
通常在移動端web開發(fā)中，UI設(shè)計(jì)稿中設(shè)置邊框?yàn)?px，在前端開發(fā)過程中，實(shí)際效果并不等于1px。為什么會有1px像素的問題？先了解設(shè)備的物理像素和邏輯像素
- 物理像素
移動設(shè)備出廠時(shí)，不同設(shè)備自帶的不同像素，也成為硬件像素； - 邏輯像素
即css中記錄的像素
對于物理像素和邏輯像素的1px的含義是不一樣的，他們之間存在著一種比例關(guān)系，通?？梢杂胘avasc中的window.devicePixelRatio來獲取，也可以用媒體查詢的-webkit-min-device-pixel-ratio來獲取，當(dāng)然，比例多少與設(shè)備有關(guān)
例如淘寶網(wǎng)，在Iphone5，和pc端下的window.devicePixelRatio值分別為2和1
image.png
在手機(jī)上border無法達(dá)到我們想要的效果。這是因?yàn)?devicePixelRatio 特性導(dǎo)致，iPhone的 devicePixelRatio==2，而 border-width: 1px; 描述的是設(shè)備獨(dú)立像素，所以，border被放大到物理像素2px顯示，在iPhone上就顯得較粗。
em
em是相對長度單位。相對于當(dāng)前對象內(nèi)本文的字體尺寸（如果沒有設(shè)置本文尺寸，那就是相對于瀏覽器默認(rèn)的字體尺寸，也就是16px），這樣計(jì)算的話。如果沒有設(shè)置字體尺寸就是1em = 16px。如果使用em的話，有個(gè)好的建議，就是將body的font-size設(shè)置成62.5%，也就是16px * 62.5% = 10px。這樣的話1em = 10px，方便我們計(jì)算。
rem
rem和em一樣也是相對長度單位，但是不一樣的是rem始終都是相對html根元素。這樣有個(gè)很大的有點(diǎn)就是使用rem后不會受到對象內(nèi)文本字體尺寸的影響，而且只需要改變根元素就能改變所有的字體大小。兼容性也是不錯的，IE8以上版本和其他瀏覽器都已經(jīng)支持，是個(gè)做響應(yīng)式頁面的好選擇
在移動頁面中具體是如何使用rem的？
瀏覽器默認(rèn)的字體大小為16px，因此默認(rèn)1rem = 16px，在實(shí)際開發(fā)中，我們給根元素設(shè)置一個(gè)字體大小例如font-size:100px,則根據(jù)瀏覽器寬度和當(dāng)前頁面可視區(qū)域來決定換算比例
//改變font-size
(function(doc,win){
var docEI = doc.documentElement,
resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
recalc = function(){
var clientWidth = docEI.clientWidth;
if(!clientWidth) return;
//100是字體大小，1536px是開發(fā)時(shí)瀏覽器窗口的寬度，等比計(jì)算
docEI.style.fontSize = 100*(clientWidth/1536)+'px';
}
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);
vw和vh
vw和vh是視口（viewport units）單位，何謂視口，就是根據(jù)你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現(xiàn)在那么多不同電腦有關(guān)分辨率的自適應(yīng)問題。
vw是可視窗口的寬度單位，和百分比有點(diǎn)一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1800px，那么1vw = 18px。和百分比不一樣的是，vw始終相對于可視窗口的寬度，而百分比和其父元素的寬度有關(guān)。
