在移动端的项目中，1px的边框在高清屏下，移动端的1px会会变粗。

关于分辨率、ppi、dpi和dpr等参考文章: https://www.cnblogs.com/yesyes/p/7638607.html

那么为什么会产生这个问题呢？

主要跟DPR(即设备像素比)有关，它是默认缩放为100%的情况下，设备像素和css像素的比值。

window.devicePixelRatio = 物理像素 / CSS 像素

目前主流的屏幕DPR=2 （iPhone 8）,或者3 （iPhone 8 Plus）。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。

解决方案

  1. 0.5px 边框。通过响应式识别设备的dpr，然后进行特殊处理。但是这个方案存在一个问题，可能会导致retina屏的浏览器识别不了0.5px边框，将它解析为0px。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。解决方案可以通过 js 检测浏览器能否处理 0.5 px 的边框。
  2. 使用 border-image实现。
  3. 使用 background-image 实现。(大致同2)
  4. 多背景渐变实现。
  5. 使用box-shadow模拟边框
  6. viewport + rem实现
  7. 伪类 + transform 实现

个人认为常用的也就是第6个或者第7个方法了。

参考资料：https://www.jianshu.com/p/7e63f5a32636