移动端 1px 边框问题 ​

问题 ​

1. 1px 边框产生原因？ ​

1px border 问题，是指在移动端高分辨率设备上 1px 边框视觉上感觉较粗的问题，此问题涉及到物理像素与逻辑像素问题。简单来说，如在2倍屏的设备下，设备宽度为375px，但实际物理像素点为 750px。
假设 UI 的设计稿宽度为 750px，图中设计的边框宽度为 1px，在我们 375px 的设备下，我们应该将宽度写为 0.5px，但是安卓设备不支持此属性（IOS8+支持），直接不显示该边框。

2. 如何实现 0.5px 边框？ ​

2.1 利用伪元素的 transform 缩放实现 ​

该方案目前最为常用，比如 vant-ui 的 hairline 就是使用该方案实现 实现：在需要边框的元素上实现一个绝对定位的宽高为2倍的元素，给其设置 border: 1px，再利用 transform: scale(0.5) 对其缩放。

优点：

• 基本满足所有场景
• 支持圆角 border-radius （需要样式对伪类进行覆盖，较为繁琐，但一般会全局样式统一）

缺点：

• 会占用伪元素，如果遇到伪元素已经被使用（如除了 clearfix）等情况，需要再包裹一层元素

2.2 border-image 实现 ​

缺点：

• 边框不同颜色需要切不同图片
• 圆角需要图片处理，边缘模糊

2.3 viewport + rem 实现 ​