一：概念

1：物理像素(设备像素)

显示屏幕的最小物理单位。

每个物理像素包含自己的颜色、高宽等，不可再细分。

物理像素是在设备出厂是设定的，设备一旦造出来就不会变大小和数量。

2：设备独立像素

设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素，有时我们也说成是逻辑像素，由相关系统转换为物理像素。

物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的 设备像素比。

3：设备像素比

设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系。

它的值可以按如下的公式的得到：

// 在某一方向上，x方向或者y方向

// 设备像素比(dpr) = 物理像素 / 逻辑像素(px)

4：视觉误差原因

因为屏幕的分辨率和浏览器的的分辨率存在换算关系，所以 1像素的线 在屏幕上会占用 2个或者2个以上 视觉像素，这点在移动端尤其明显。

由于占用视觉像素多的原因，导致渲染出来的这条细线在视觉上会比一像素要粗一些。

二：实现方法

1：使用伪类解决

.box-one-px {
	position: relative;
}
.box-one-px:before {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 200%;
	height: 1px;
	tansform: scale(.5);
	tansform-origin: 0 0;
	background: #f5f5f5;
}

2：使用 meta viewport 解决

/ 在devicePixelRatio = 2 的屏幕下设置meta
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
// 在devicePixelRatio = 3 的屏幕下设置meta
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

3：使用 box-shadow 模拟边框

.box-one-px {	
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

4：使用 border-image

.box-one-px {	
    border-width: 0 0 1px 0;	
    border-image: imageUrl 2 0 round;	
}

5：使用 背景渐变 linear-gradient

.box-one-px {	
    background-image: linear-gradient(0deg,black 50%,transparent 50%);
    background-size: 100% 1px;	
    background-repeat: no-repeat;	
}

6：使用第三方库解决