## 给你看看0.5px长什么样？ 做移动端适配时经常听到1px边框的问题，这是个什么梗？为什么是1px？为什么是边框？下面我们就一起解开它的面目。 设计师要的1px是一个物理像素，也就是所能设计出来的最细的线，而css中的1px是一个点，dpr为2的话，那么就是两个物理像素了，这就不是设计师要的细线了。 通常边框我们并不需要它随着屏幕越大而越粗，也就是不需要它自适应，所以不能用rem，只能用px，虽然苹果支持0.5px，但是有的安卓机不支持，0.5px可能就直接显示不出来而被忽略掉，所以还是写1px，那用什么办法，让设计师看到它想要的细线呢？（安卓机是看不出来的） 视口缩放`scale=0.5`就能满足要求，这样可以不用改动任何代码。视口缩放是最简单的方式（**已经[证明](https://www.kancloud.cn/xiak/quanduan/698257)过了视口缩放不会影响rem元素大小**）。 还有一种方式就是检测到支持细线的，给html元素加一个类名`hairlines`，然后在css里面适配写0.5px的边框，这也是淘宝最新的方案[flexible.js](https://github.com/amfe/lib-flexible)，不过这种方式需要增加很多边框适配的css，所有细线效果都要重写为0.5px，有点麻烦，我更倾向于第一种。虽然有点简单粗暴，但更省事。  （锤子坚果3：分辨率 1080x2160，dpr 3，设备独立像素 360x720）  （iPhone 7 plus：分辨率 1242x2208，其实是 1080x1920，dpr 3，设备独立像素 414x736） 看来还真是要拿真机体会一下啊，不然还真不知道0.5px的细线长什么样啊。（安卓的屏幕分辨率也很高了，咋就不能显示出来细线呢\[捂脸\]，这波对比，我服） * * * * * ### 现在回答上面的三个问题： **Q：这是个什么梗？** A：苹果上可以显示更细的线的梗。 **Q：（为）什么是1px？** A：设计师的1px和前端的1px，此（物理像素）非彼（点：设备独立像素）。 **Q：为什么是边框？** A：因为边框不需要自适应。 * * * * * last update：2018-7-21 07:12:04