目录
写在开头
正文之前，我们需得了解几个重要的名词： 物理像素、设备独立像素和设备像素比
工作中我们通常使用 px 作为定义元素宽高、边框粗细、内外边距等的单位，但是需要注意的是：
CSS样式里面的 px 和 物理像素 并不是相等的。
CSS中的像素只是一个抽象的单位，在不同的设备中，1px所代表的物理像素是不同的。
在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，
但在移动端，CSS的1px由于设备机型的不同，所呈现出来的可能不是一个像素，可能是几个物理像素。
物理像素(physical pixel)
物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素
设备独立像素(device-independent pixel)
设备独立像素又被称为CSS像素，也就是是我们写CSS时所用的像素（px），它是一个抽象的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。
设备像素比(device pixel ratio)
设备像素比简称为dpr，定义了物理像素和设备独立像素的对应关系：设备像素比 ＝ 物理像素 / 设备独立像素。
CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么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%，能解决有时候边框缺失的问题 */
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边框问题的几种方法
如有不足，望大家多多指点！ 谢谢！