关于像素问题

目前使用的像素单位有：px,em,rem,vw,vh

px

px即像素，是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如移动端和pc端，而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率。

px产生的像素问题

通常在移动端web开发中，UI设计稿中设置边框为1px，在前端开发过程中，实际效果并不等于1px。为什么会有1px像素的问题？先了解设备的物理像素和逻辑像素

• 物理像素
  移动设备出厂时，不同设备自带的不同像素，也成为硬件像素；
• 逻辑像素
  即css中记录的像素
  对于物理像素和逻辑像素的1px的含义是不一样的，他们之间存在着一种比例关系，通常可以用javasc中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取，当然，比例多少与设备有关
  例如淘宝网，在Iphone5，和pc端下的window.devicePixelRatio值分别为2和1
  
  

  image.png
  
  在手机上border无法达到我们想要的效果。这是因为 devicePixelRatio 特性导致，iPhone的 devicePixelRatio==2，而 border-width: 1px; 描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

em

em是相对长度单位。相对于当前对象内本文的字体尺寸（如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px），这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便我们计算。

rem

rem和em一样也是相对长度单位，但是不一样的是rem始终都是相对html根元素。这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响，而且只需要改变根元素就能改变所有的字体大小。兼容性也是不错的，IE8以上版本和其他浏览器都已经支持，是个做响应式页面的好选择

在移动页面中具体是如何使用rem的？

浏览器默认的字体大小为16px，因此默认1rem = 16px，在实际开发中，我们给根元素设置一个字体大小例如font-size:100px,则根据浏览器宽度和当前页面可视区域来决定换算比例

//改变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是开发时浏览器窗口的宽度，等比计算
        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）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。