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

Question

retina 屏幕下下 1 个 CSS 像素对应 2 个物理像素（多数情况下是 2 个）， 线条这看起来就比较粗，那有没有什么办法能解决这个问题呢？

Answer 1

什么导致了 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实现