为什么会存在1px问题？怎么解决？ - 掘金
作为前端，你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐 - 掘金
解决移动端1px边框问题的几种方法 - AhuntSun - 博客园
1、分辨率
分辨率=x像素（水平） * y像素（垂直）
2、物理像素
显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像
3、逻辑像素 （PX , CSS pixels）
CSS像素的单位是px，px是一个相对单位，相对的是设备物理像素(device pixel)，其相对性体现在在同一个设备上或在不同设备之间每1个px所代表的物理像素是可以变化的
4、设备像素比（device pixel ratio）
物理像素 与 逻辑像素 比值，常见2dpr，3dpr
在一般PC屏幕上， CSS的1px = 屏幕的 1个物理像素
retina屏幕上， CSS的1px = 屏幕的 4个物理像素
移动端开发时， 设计师以iPhone6(750px*1344) 为模板进行设计的，这是是物理像素。但是前端开发者以逻辑像素为准，所以开发时需要将 单位除以2
一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点
5、移动端 1px 边框问题
由于同一个设备上或在不同设备之间 1px 所代表的物理像素是可以变化的。
CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px。而设计师想要的1px宽的直线,其实就是1物理像素宽。
如果我们要画一条物理像素为1px的边框，我们可以先通过媒体查询来查询本设备的dpr那么在像素比为2dpr的设备上，我们在css中要设置border:0.5px solid red,这很容易理解，因为css中我们写的是逻辑像素。
然而，并不是所有手机浏览器都能识别border: 0.5px
矛盾就在这里
0.5px会被当成为0px处理，那么如何1px细线问题呢
以下两种方法比较好：
1.伪元素+transform
构建1个伪元素, border为1px, 再以transform缩放到50%。
对于老项目，有没有什么办法能兼容1px的尴尬问题了，个人认为伪类+transform是比较完美的方法了。
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并将 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
单条border样式设置：
.scale-1px{position: relative;border:none;
}
.scale-1px:after{content: '';position: absolute;bottom: 0;background: #000;width: 100%;height: 1px;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0;
}
四条boder样式设置:
.scale-1px{position: relative;margin-bottom: 20px;border:none;
}
.scale-1px:after{content: '';position: absolute;top: 0;left: 0;border: 1px solid #000;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;
}
最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏：
if(window.devicePixelRatio && devicePixelRatio >= 2){document.querySelector('ul').className = 'scale-1px';
}
优点：可以满足所有场景，且修改灵活。
缺点：对于已使用伪类的元素（例如clearfix）要多层嵌套。
2.viewport + rem 实现
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时，输出viewport：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。
优点：
- 所有场景都能满足
- 一套代码，可以兼容基本所有布局
缺点：
- 老项目修改代价过大，只适用于新项目
实例：
<div class="scale-1px">
限时特惠
</div>.scale-1px{position: relative;border:none;width:100px}.scale-1px:after{content: '';position: absolute;top: 0;left: 0;border: 1px solid red;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height:200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;}
