木灵鱼儿
阅读:1018
关于1px边框问题的探索
1px在不同设备的一个探究
其实我们要搞明白两个问题:
- 为什么有时候边框无法在部分手机显示?
- 我们真的要小于1px吗
为什么有时候边框无法在部分手机显示?
有两种设置方式:
- 0.5px
- 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解决方案》
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
meta name= viewport 知识补充
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。物理像素:硬件本身的实际像素大小软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)更多的对比可以去这个网站查看:mydevice然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用...

CSS边框图片属性border-image
今天学了边框图片,说实话听的是一脸懵逼,个人比较纠结于“大局”,所以一直卡在角和边的设定上,后来经过自己实际测试,得出了一些心得。基本写法:border-image:url(xxx.jpg) 50/20px round;url就是调用一张素材图片50是一个没有写单位的数字,意思是裁剪出素材图片中的对应大小,比如这张图有500px的宽度,我们只要其中左边的50,那么我们就写50就好了,如果你要单独设置四个角,那就要都分开写,会很麻烦,就不说了,自己看字典把!20px就是边框需要展示出来的图片宽度,比如我只要你的边框图片显示50px,那就写50px,而且边框的图片和背景的效果有些相同,他是不...