1 像素问题

在解决 1 像素问题之前,我们需要知道为什么产生这个原因,简单来说,就是手机设备的

产生背景

解决方案

解决方案很多种,大多算曲线救国(Mobile Hack),例如把图片做成要 2px,上部 1px 为透明,下部 1px 为视觉颜色,然后用过 border-image 或者 background 来定位露出的 1px(background 的兼容性比 border-image 好),这两者的缺点在于修改颜色麻烦,需要替换图片,因为图片是位图,像素会有模糊的风险

以上讲了 7 种解决 1 像素问题的解决方案,但是实际开发中,你会发现,事实并没有你想象中那么简单,例如你如果要对 Media Query 做兼容,应该要写在哪里,如何做到一套代码多处使用

开发中的解决方案

1 像素问题

参考资料

参考资料:

1 像素问题是由于什么原因产生的

https://www.jianshu.com/p/7e63f5a32636open in new window

1 像素

https://zhuanlan.zhihu.com/p/73261198open in new window

6 种移动端 1px 解决方案(完整版)

https://mp.weixin.qq.com/s?__biz=Mzg5ODA5NTM1Mw==&mid=2247485314&idx=1&sn=0296e60f54e12951d7c5b08f8849c4a1&chksm=c0668614f7110f025c8e8897c1a14aabae09c1cf8ca37aa90ee36f451b5455008300270e8f54&mpshare=1&scene=1&srcid=&sharer_sharetime=1586389734453&sharer_shareid=778ad5bf3b27e0078eb105d7277263f6#rdopen in new window

关于移动端开发 1px 线的一些理解

https://zhuanlan.zhihu.com/p/73261198open in new window

7 种方法解决移动端 Retina 屏幕 1px 边框问题

https://www.jianshu.com/p/7e63f5a32636open in new window

0.5 像素的边框,怎么做

Last Updated:
Contributors: johan