设备像素比dpr以及像素border的实现

1、dpr定义：设备物理像素的个数除以设备独立像素的大小

2、物理像素就是手机屏幕上一个一个的发光的点,大小是固定的,独立像素也叫做逻辑像素,css设置的像素大小就是逻辑像素,对于dpr等于2的手机屏幕,设置css宽度为1px,其实覆盖的是2个设备物理像素

3、很多设计师的移动设计稿是基于iphone6做出来的，大家都知道iphone6的dpr=2(从iphone4开始就是2了)，设计稿会给成750的，所以前端开发写的  css像素（设备独立像素）= 设备的物理像素 / 2 = 750 / 2 = 375=苹果6的屏幕宽度，你只需要把设计师的宽度缩小一半就好了。

4、当给元素加border时，PC端是1px，对于dpr==2的手机来说，是2px，所以要缩放

5、实现代码，给需要加1像素边框的元素，加.border-1px类

/*1像素border的实现，当dpr大于1时，缩小*/
.border-1px {
	position: relative;
}
.border-1px::after {
	position: absolute;
	display: block;
	left: 0;
	bottom: 0;
	content: " ";
	width: 100%;
	border-top: 1px solid rgba(7, 17, 27, .1);
}
@media (min-device-pixel-ratio: 1.5) {
	.border-1px::after {
		transform: scale(0.7);    /*1.5*0.7 == 1*/
	}
}
@media (min-device-pixel-ratio: 2) {
	.border-1px::after {
		transform: scale(0.5);
	}
}
@media (min-device-pixel-ratio: 3) {
	.border-1px::after {
		transform: scale(0.333);
	}
}