产生的原因

我们做移动端页面时一般都会设置meta viewport的content=“width=device-width”， 这里就是把html视窗宽度大小设置等于设备宽度的大小，大多数手机的屏幕设备宽度都差不多，以iphoneX为例，屏幕宽度375px。

而UI给设计图的时候基本上都是给的二倍图甚至三倍图，假设设计图是750px的二倍图，在750px上设计了1px的边框，要拿到375px宽度的手机来显示，就相当于整体设计图缩小一倍，所以在375px手机上要以0.5px呈现才符合预期效果，然而css里最低只支持1px大小，不足1px就以1px显示，所以你看到的就显得边框较粗，实际上只是设计图整体缩小了，而1px的边框没有跟着缩小导致的。（ps：ios较新版已支持0.5px，安卓不支持，这里暂且忽略）

简而言之就是： 多倍的设计图设计了1px的边框，在手机上缩小呈现时，由于css最低只支持显示1px大小，导致边框太粗的效果。

解决方法

1. background-image && boder-image

缺点：换个颜色还得换图,而且图片处理圆角会出现模糊的问题

2. border-shadow

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

3. 伪元素 + scale缩放

参考文章链接

移动端1px像素问题的根本原因 | 优质解决方案 (opens new window)