木灵鱼儿

木灵鱼儿

阅读:330

最后更新:2022/04/08/ 16:25:00

关于1px边框问题的探索

1px在不同设备的一个探究

其实我们要搞明白两个问题:

  1. 为什么有时候边框无法在部分手机显示?
  2. 我们真的要小于1px吗

为什么有时候边框无法在部分手机显示?

有两种设置方式:

  1. 0.5px
  2. 0.22rem

首先0.5px在老手机是不支持的,特别是安卓,0.5px(小于1px)会被视为1px渲染。

0.22rem或者0.22em他们都是相对父级或者根元素进行换算的,最终他们也得变成px单位渲染,有可能是大于1px,有可能会小于1px,最终也会出现部分手机边框是粗的,原因也是因为不足1px被当1px渲染了。

还有一个原因,但是需要先了解一些屏幕像素的知识了!

我们可以将屏幕的像素视为一个个小方格,一排可能就n个这种大小的方格,每个方格有自己的灯光控制显色,也就是说一个方块就是最低的物理控制单位,被称为1px。

在1:1的屏幕下,css中1px对应物理上的1个方格, 当我们1.5px时,0.5px无法在物理上实现,所以大部分做法就是这0.5px不做显示。但是部分高分屏中,0.5px可能对应的是1个方格,那么他的0.5就能被显示,如果屏幕的像素点够多,他就能支持更多的小数级px。

反之,如果屏幕物理像素不够多,但是又是高分屏时,它卡在了某个中间点上,0.5或者其他无法对应到1个物理方格,那么这个像素就无法被正确显示。

所以,如果能1px显示,我的建议就是1px显示,浏览器已经做了充足的转换,没必要再自己转了。

我们真的要小于1px吗

为什么会有小于1px的情况,当然得设计背锅,设计师在设计ui样式时,往往使用的分辨率都是大于设备显示的分辨率的,常用的就是750px的宽度,但是手机可能大部分在375px左右。

这就导致我们需要把750px像素的设计稿等比缩放在手机上,但是这就导致在750px上的1px边框,在手机上就得变细,否则就会显示边框很粗(视觉差)。

这就产生了一个前端最蛋疼的问题,如何实现0.5px的细边框。

显然从物理的角度看,不存在0.5px的大小,只能从软件层处理。

另一方面的原因手机端1px的边框很粗,这个是因为手机显示像素很高,如果1:1显示,网页就会显示的很小,为了能更好的阅读,css的像素会和物理的像素做一个倍率转换,有的设备css的1px等于物理2px,有的css的1px等于物理3px。虽然最终看上去每个设备上1px宽度都是一致的。

所谓,成也萧何,败也萧何,因为高分屏,边框是可以想办法做的更细。

其实他们最终想要的就是:如何在高分屏渲染一个真实1px物理像素的边框。(让边框看起来细一点)

做法可以参考这个文章:《移动端1px解决方案》

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 38
文章被阅读 330

相关文章