面试官：移动端1px问题怎么解决？

移动端1px问题怎么解决？，这是一道非常高频的互联网大厂前端面试题，但是很多同学在面试时候都回答不完整。老规矩，点赞收藏，点点关注支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题。理想哥上一个视频有讲「移动端为什么会有1px问题？」感兴趣的朋友可以去看看。

如果我是求职者，我会这么回答：

移动端1px问题主要是因为css像素和对应的物理像素不一致，有以下几种解决方案。

第一种：0.5px 实现

我们可以直接设置 border是0.5px，虽然解决问题了，但是实用性不高，会有兼容性问题，只能在ios8+，以及部分安卓系统可以正常展示。

第二种：使用 border-image 实现

我们可以让设计同学出一个1px的图片，然后我们使用border-image属性来实现。缺点是后期样式调整需要找设计同学重新出图，而且还不支持边框圆角的场景。

第三种，使用viewport + rem 实现

通过设置缩放，让 CSS 像素等于真正的物理像素，边框1px直接写上可以自动转换。缺点是需要使用js对文档进行修改，性能会有影响，而且不适合老项目改造

第四种：使用伪元素 + transform 实现

通过在目标元素的后面追加一个 ::after 伪元素，然后设置transform属性来实现，这种方案比较通用，兼容性好，无副作用，推荐使用。

第五种：使用box-shadow实现

通过box-shadow设置1px的阴影，缺点是边框有阴影，颜色浅，同样也有兼容性问题，Safari 不支持 1px 以下的 box-shadow。

第六种：使用svg 实现

因为 svg 是矢量图形，它的 1px 对应的物理像素就是 1px。这种方案实现简单，也可以实现圆角，

综上，推荐使用伪元素 + transform、svg 实现方式来解决移动端1px问题，如果是新项目，也可以使用viewport 方案。

以上就是这个问题的回答了，大家可以下次面试时试试这么回答看看效果。

最后，欢迎关注理想哥，每天学点前端面试小技巧。