1px问题的原因
是因为不同的设备，不同的设备像素比（dpr）导致的。当我们在样式中设置边框宽度为 1px 时（这里使用的是css像素），设备像素比为2的设备，会用4个物理像素（dp）来渲染这个边框；而设备像素比为1的设备，会用1个物理像素来渲染这个边框，导致最终的视觉效果有差异。
由这个问题抛出的几个概念，往下看。
先来看1px问题的解决方案，有以下三种：
- 伪元素+缩放；
- 使用背景图片；
- postCss；
这里只例出伪元素+缩放的解决方案：构建一个伪元素，高度设为1px，按照设备像素比，将高度缩放至1。
.border_1px{
position: relative;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
.border_1px::before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
background-color: #999;
transform: scaleY(0.67);
height: 1px;
width: 100%;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
.border_1px::before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
background-color: #999;
transform: scaleY(0.5);
height: 1px;
width: 100%;
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.border_1px::before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
background-color: #999;
transform: scaleY(0.333);
height: 1px;
width: 100%;
}
}
接下来我们来看几个概念：
设备像素（device pixel），简写为dp
设备像素又称为物理像素，是设备能控制显示的最小单位，可以把它看作是显示器上的最小的那个点。此像素是设备的固有属性，也就是说，从出厂的那一刻，设备像素就已经固定，不会再发生改变。
通常使用分辨率来描述设备像素，如我们常说的 1920*1080 ，表示设备横向有1920个像素点，纵向有1080个像素点。
屏幕像素密度（pibel per inch），简写为ppi
屏幕像素密度，也叫像素密度。是图像分辨率的单位。表示每英寸所拥有的像素数量。ppi 数值越高，表示显示屏能够以越高的密度显示图像，图像也会更加清晰细腻。它的单位是dpi（dot per inch）。
ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（例如苹果公司的Retina显示屏）
CSS像素（CSS pixel）
我们在样式代码中使用的就是 css像素，它是一个抽象概念，实际中并不存在，用于逻辑上衡量像素的单位。
在页面没有缩放的情况下，1个css像素等于1个设备独立像素。
//指的是css像素
document.documentElement.clientWidth
document.documentElement.clientHeight
设备独立像素（device independent pixel），简写为 dips/dip/dp
dip 是一种物理测量单位，基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序转换为物理像素。
一个设备独立像素可能包含多个物理像素，包含的越多，显示越清晰。
//指的是设备独立像素
window.screen.width
举个例子：iPhone3和iPhone4，屏幕尺寸一样，后者的像素密度是前者的两倍，如果使用物理像素作为单位，那么样式代码中的100px，视觉上iPhone4是iPhone3的一半，所以使用物理像素在web中设置尺寸是不合理的。因此操作系统定义设备独立像素，不管屏幕的参数如何，都能以合适的大小显示。iPhone3的物理像素是320480，iPhone4的物理像素是640960，但是它们的设备独立像素都是320*480，iPhone4用4个物理像素表示1个设备独立像素，这一切都是由操作系统控制。
设备像素比（devicePixelRatio），简称为dpr
设备像素比指的是物理像素和设备独立像素的比，即1个设备独立像素由多少物理像素渲染，计算公式为：
DPR=物理像素/设备独立像素
//指的是设备像素比
window.devicePixelRatio
上文中的iPhone3 的设备像素比=1；iPhone4 的设备像素比=2；
- 当设备像素比为1时，使用1（1×1）个物理像素显示1个CSS像素；
- 当设备像素比为2时，使用4（2×2）个物理像素显示1个CSS像素；
- 当设备像素比为3时，使用9（3×3）个物理像素显示1个CSS像素；
知道设备比之后，我们就可以将使用到的CSS像素转换为设备像素，解决相同css单位在不同设备显示差异的问题。
