关于移动端开发 1px 线的一些理解和解决办法

1px线变粗的原因

移动端项目常常是根据设计图，设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢

要知道问题的原因首先要了解一下几个概念：

(1)物理像素(physical pixel)

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

(3)设备像素比(device pixel ratio )简称dpr

知道了设备像素比，我们就大概知道了1px线变粗的原因。简单来说就是手机屏幕分辨率越来越高了，同样大小的一个手机，它的实际物理像素数更多了。因为不同的移动设备有不同的像素密度，所以我们所写的1px在不同的移动设备上等于这个移动设备的1px。现在做移动端开发时一般都要加上一句话：

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

这句话定义了本页面的viewport的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放。

viewport的设置和屏幕物理分辨率是按比例而不是相同的，移动端window对象有个devicePixelRatio属性，它表示设备物理像素和css像素的比例，在retina屏的iphone手机上，这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px。通过设置viewport，可以改变css中的1px用多少物理像素来渲染，设置了不同的viewport，当然1px的线条看起来粗细不一致。

1px线变粗的解决方法

伪类 + scale

这种方法的原理就是把原来元素的border去掉，然后用 :before 或者 :after 重做 border ，原先的元素相对定位，新做的 border 绝对，定位使用 transform 的 scale 把线条高度缩小一半，新边框就相当于0.5px了。代码如下：

.