如何解决移动端 Retina 屏 1px 像素问题 ？

什么导致了 1px 问题？

在移动端 Web 开发中，UI 设计稿中设置边框为 1 像素，前端在开发过程中如果出现 border:1px ，测试会发现在 Retina 屏机型中，1px 会比较粗，即是较经典的移动端 1px 像素问题。

以 iphone6 为例，iphone6 的屏幕宽度为 375px ，设计师做的视觉稿一般是750px ，也就是 2x ，这个时候设计师在视觉稿上画了 1px 的边框，于是你就写了 border:1px ，so...1px边框问题产生了。

对设计师来说它的 1px 是相对于 750px 的（物理像素），对你来说你的 1px 是相对于 375px 的（css像素），实际上你应该是 border:0.5px 。

如何解决？

方案	优点	缺点
0.5px实现	代码简单，使用css即可	IOS及Android老设备不支持
border-image实现	兼容目前所有机型	修改颜色不方便
viewport + rem 实现	一套代码，所有页面	和0.5px一样，机型不兼容
伪元素 + transform实现	兼容所有机型	不支持圆角
box-shadow模拟边框实现	兼容所有机型	box-shadow不在盒子模型，需要注意预留位置
svg 实现	实现简单，可以实现圆角	需要学习 svg 语法

0.5px 实现

.border-1px { border: 1px