移动端基础知识（像素+1px边框+css长度值）

一、css长度值

---

vm 和vh的区别

参考文章

“视区”（视窗）所指为浏览器内部的可视区域大小 ，即window.innerWidth/window.innerHeight大小   
，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。  

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

二、像素问题

---

参考文章
参考文章

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素 
都有自己的颜色值和亮度值。   

设备独立像素(density-independent pixel)

(也叫密度无关像素或逻辑像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序  
使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫 
”设备独立像素”)，然后由相关系统转换为物理像素。  

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到： 

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向     

你可以通过JavaScript 中的window.devicePixelRatio来获取设备中的像素比值。

设备像素也就是物理像素是保持不变的，逻辑像素是可以伸缩的

视觉稿

根据dpr和设备尺寸来得到视觉稿的尺寸    

例如iphone6的尺寸为375×667，对于retina（高分辨率）屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。

在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下，1个css像素对应 4个物理  
像素(1:4)。

三、viewport

---

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，
再具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。

对于viewport，国外的PPK大神有很深的见解，他把viewport分成了三种：

           layout viewport
            visual viewport
            ideal viewport

详细信息参考这里

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

四、一像素边框的问题

---

设计师要的1px指的是物理像素，而我们写的是逻辑像素

css像素=物理像素/dpr=1/2=0.5px  

对于css而言，可以认为是border: 0.5px;，这是retina下(dpr=2)下能显示的最小单位。

解决一像素边框的问题

伪类 + transform   

原理解释：原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，设置其高为一个像素，然后设置上边框也为一个像素，最后通过 CSS3 的 transform 属性把伪元素缩放为原来的一半大小。原先的元素相对定位，新做的 border 绝对定位

.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏：

if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('ul').className = 'scale-1px';
}

其他方法参考这里

这里的方法更全哦