設備像素比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);
	}
}