写在开头

正文之前,We need to know several important nouns： 物理像素、Device independent pixel and pixel than
We usually use at work px As define the elements wide high、边框粗细、Inside and outside the unit margin, etc,但是需要注意的是：

CSS样式里面的 px 和 物理像素 并不是相等的.
CSS中的像素只是一个抽象的单位,在不同的设备中,1pxRepresented by the physical pixel is different.
在PC端,CSS的1pxGenerally corresponds to the computer screen1个物理像素,
但在移动端,CSS的1pxDue to the different equipment models,May not be presented by a pixel,May be several physical pixel.

物理像素(physical pixel)

物理像素又被称为设备像素、设备物理像素,它是显示器（电脑、手机屏幕）The minimum physical display unit,Each physical pixel consists of color and brightness values.The so-called double screen、二倍屏(Retina)、三倍屏,Refers to how many physical pixels to display device to aCSS像素,也就是说,Many times the screen with more finer physical pixels to display aCSS像素点,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个物理像素

设备独立像素(device-independent pixel)

Device independent pixel is also known asCSS像素,Also is we writeCSSUsed for the pixels（px）,It is an abstract unit,主要使用在浏览器上,用来精确度量Web页面上的内容.

设备像素比(device pixel ratio)

设备像素比简称为dpr,定义了物理像素和设备独立像素的对应关系：设备像素比 ＝ 物理像素 / 设备独立像素.

CSS的1px等于几个物理像素,In addition to, and screen pixel densitydpr有关,Also with the user zoom.例如,当用户把页面放大一倍,那么CSS中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,CSS中1px所代表的物理像素也会减少一倍.

移动端 1px 边框的解决方案

方案一

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

方案二

.border-1-bottom{
    
	position: relative;
}
.border-1-bottom:after{
    
​	content: "";
​	width: 100%;
​	height: 1px;
​	background: #ccc;
​	position: absolute;
​	left: 0;
	bottom: 0;
​	transform: scaleY(0.5);
​	transform-origin: center bottom;
}
/* 或者 */
.border-1-bottom:before {
    
	content: " ";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #ccc;
	color: #ccc;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

方案三

/* 移动端 1px 边框 ------ 开始 */
.border-1, .border-1-bottom, .border-1-left, .border-1-right, .border-1-top, .border-1-top-bottom {
    
	position: relative;
}

.border-1-bottom:after, .border-1-left:after, .border-1-right:after, .border-1-top-bottom:after, .border-1-top:after, .border-1:after {
    
	content: ' ';
	pointer-events: none;
	box-sizing: border-box;
	-webkit-transform-origin: 0 0;
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	/* 多加 0.1%,To solve the problem of sometimes border is missing */
	width: 199.8%;
	height: 199.7%;
	transform: scale(0.5, 0.5);
	border: 0px solid #eee;
	z-index: 2;
}

.border-1-top:after {
    
	border-top-width: 1px;
}

.border-1-left:after {
    
	border-left-width: 1px;
}

.border-1-right:after {
    
	border-right-width: 1px;
}

.border-1-bottom:after {
    
	border-bottom-width: 1px;
}

.border-1-top-bottom:after {
    
	border-width: 1px 0;
}

.border-1:after {
    
	border-width: 1px;
}

/* 移动端 1px 边框 ------ 结束 */

写在末尾

• 参考文章：解决移动端1px边框问题的几种方法

如有不足,望大家多多指点！ 谢谢！