前段时间看群里面有人问关于1px的问题,顿时群里就炸开了,好像很多人都对1px这个问题不太理解,什么是1px问题?为什么2px没有问题?1px问题怎么解决?看完这篇文章相信你对这些概念有本质上的认识。
什么是1px问题?
其实描述起来很简单,UI给你设计稿的时候标注这个边框是1px,认真的前端直接在代码上写border:1px,结果发现在有的手机中,1px会比实际效果粗,这就是典型的1px问题?
群友:纳尼? 我怎么没有发现过1px为变粗?
我:好吧,可能你对UI还原度的要求比较低
为什么会有1px问题?
首先需要明确一点在我们开发中,1px不是一定会出现的,比如pc基本不会出现,移动端有的手机也可能不会出现,为什么会这样?先打个问号,带着问题往下看。
一波概念来袭
(设备独立像素,CSS 像素,逻辑像素) VS (设备像素,物理像素)
很简单,以 iPhone6/7/8为例，这里我们打开 Chrome 开发者工具 我们可以看到iPhone6/7/8 是375*667 这就是css像素,又名逻辑像素和设备独立像素
但是你买的iPhone7的说明书上明明写着你的屏幕是750*1334 这是什么鬼?
设备像素比
现在我们已经知道,css像素和物理像素是不一样的,那他们又什么关系呢?答案是没什么关系,只是概念不同而已,但是物理像素比css像素会得出另一个概念设备像素比,即
设备像素比 = 物理像素/css像素
还记得我们上面说的为什么pc端中没有1px问题呢?现在可以给出答案了是因为在pc端中css像素==物理像素即设备相似比为1所有当我们在页面上写1px的时候页面上就呈现出来的就是1px
但在移动端,如上面提到的iPhone7显然它的设备像素比是750/375 = 2 所有当UI给我们出的设计稿中设计的边框是1px(物理像素)我们需要转化为css像素即:
css像素 = 物理像素/设备像素比 = 1px/2 = 0.5px
可恶就可恶在0.5px上,因为有的浏览器在解析0.5px 的时候会把他解析成1px,然后在用公式换算出来物理像素为
物理像素 = css像素 * 设备像素比 = 1px * 2 = 2px
所以原本应该是1px到最后呈现出来的变成了2px也就是我们说的变粗了
还记得上面我们说过有的手机也 不会出现 1px的问题吗,这并不是说这样的手机好,主要有一下两个原因
- 老式的手机,设备像素比为1,和pc端一样自然不会出现
1px问题 - 有的手机浏览器在解析
0.5px的时候正常,那自然也不会出现1px的问题,如某些苹果手机
如果你的设备像素比 越大 意味着你的手机屏幕越高清,意味着这个bug在你手机上越明显
理解了吗您嘞?
为什么2px没有问题呢
个人认为,主要有一下两点
- 1px问题只是这一类问题的总称
- 现在大部分手机
设备像素比为2,这就意味着2px物理像素转化为css像素为1px,而1px浏览器都可以正常解析,所以正常
1px 如果解决
解决方案百度一搜一大堆,图片大法,伪类大法,缩放大法等等,总有一款适合你,这里我就选择...了
当然,如果对UI还原度要求不高的话,我觉得这都不算是个bug,因为在项目中有很多bug比1px更重要。但在作为一个合格的前端,对这种细节的处理会让别人感觉自己很专业🤣
总结
1px问题其实是相对于设计稿而言,而不是说我们直接在页面上写1px就会变粗
比如现在设计稿上有个1px的边框,根据计算得出css为0.5px(因为设计稿是750*1330,而我们的页面是375*667 所以的除以2计算出对应css的值)
比如以iPhone 6(dpr为 2)为例写如下样式
border-top: 1px solid red;
border-bottom: 0.5px solid red;
上面是在可以解析0.5手机上看到的效果,下面是在不可以解析0.5px手机上的效果
可以看出,在不可以解析0.5px的手机上1px 和0.5px 是一样粗的 这个时候我们可以说0.5px变粗了,如何把1px问题,说成是0.5px问题应该更好理解些吧
最后
如果对你有帮助,记得关注&点赞哦
