最近在面试中被问到了 1px 的显示问题,在网上查了一下,看过之后有几个疑问
有的文章说到产生 1px 问题的原因是因为 dpr
当 1dpr 时,1px 对应 1x1 个物理像素点
当 2dpr 时,1px 对应 2x2 个物理像素点
然后文章得出结论说,所以在(dpr=2 时,0.5px)=(dpr=1 时,1px)
不太能理解,我的疑问是,如果在两块尺寸大小相同的屏幕上,一块dpr=1,另一块dpr=2,那么它们渲染1px这个单位的时候,实际在屏幕上渲染出来的大小不是相同的吗?只是渲染这 1px 所用的像素点更密集了而已,但是大小还是一样的吧?为什么会出现差异,使得看起来在 dpr=2 的屏幕上 1px 的边框更粗了?
为什么都说 1px 问题,而不会有其它尺寸的问题呢?
如果我在 dpr=2 的屏幕上画一条设计稿上的 2px 的边框,那我为了还原设计师的原稿效果,我是不是还要把设计稿上的 2px 换成 1px ? 8px 换成 4px ?为什么就不会有这种说法呢?
1
cyrbuzz 2021-12-23 13:18:43 +08:00
个人理解:
1px 问题不是真的只有 1px 有问题,而是这一类问题的统称。 PC 端一般都是 px 相当,不过在还原移动端的设计稿时,设计师一般会出 2 倍图,这时候拿到设计图还原的时候需要按比例去计算,比如一个 2 倍图下的边框是 2px ,写的时候就要写成`border: 1px solid red`。而一个 2 倍图下的边框是 1px(3,5,7,9)的情况,这时候需要还原成 0.5px ,直接写`border-width: 0.5px`基于不同的设备可能会出现 0,0.5,1 三种不同的渲染结果。 遇到的话用 transfrom 缩小应该是比较容易写兼容性也不错的解决方案。 |
2
shuxhan 2021-12-23 13:25:15 +08:00
这让我想到了谷歌的 12px 问题,都可以用 scale 处理
|
4
vaporSpace 2021-12-23 13:47:58 +08:00
1 、我觉你说的没错,在同等屏幕尺寸下 dpr2 只是因为显示单元多,让显示更细腻,并不会存在 1px 的边框更粗的问题; 2 、移动端开发直接按设计给的 2 倍图开发就行,因为你使用的 vw/rem 单位会根据屏幕宽度去调整实际显示的 px ;
不知道我是否理解你的问题,具体你可以看下我这篇: https://juejin.cn/post/6997940376052957220 |
5
mxT52CRuqR6o5 2021-12-23 14:01:10 +08:00
有时候设计就是想要物理屏幕中的 1 像素的显示效果,也就是希望 [两块尺寸大小相同的屏幕上,一块 dpr=1 ,另一块 dpr=2] 这两块屏幕上的显示效果不一样
|
6
3dwelcome 2021-12-23 14:16:01 +08:00
前端在手机上的 1px 有误导嫌疑,并不是 PC 这种真的一个像素,确实导入了 DPI 概念。
但是你设计的时候,也是可以控制的,viewport 属性里有 target-densitydpi ,只要两款手机 DPI 设置一样,那么绘制出来的 1px ,就是真的一个像素。 否则默认情况下,1px 只是网页虚拟像素。需要乘以 DPI ,才能换算到真实屏幕像素。 |
7
cyrbuzz 2021-12-23 17:21:57 +08:00
@qqqq11
好像可以这么理解...我是这么想的= =。 不过设计师之所以要出 2 倍图就是因为以 iPhone6 的 DPR=2 为参照物来的(没深究过是不是确实是这样),所以还是和 DPR 有关。 |
8
Biwood 2021-12-23 18:26:21 +08:00
“尺寸大小相同的屏幕上”渲染出来的 1px 用肉眼看必然也是一样大小,不可能更粗。出现 1px 更粗的情况,100%是因为“尺寸大小不相同”。
|
9
zqx 2021-12-24 06:13:15 +08:00 via Android
有些设备同样尺寸屏幕上可以塞下 2 倍多的可独立渲染的像素点,所以同样写 1px ,有些设备看起来粗,有些细。
既然人家的屏幕质量更好,顺其自然才对,才符合用户心理,不应该再用 scale 去强行渲染所谓的 0.5px ,包括 iPhone X 的什么安全区也一样,在代码里加 padding 是错误行为。 |
10
Ausmo 2021-12-24 11:33:21 +08:00
网上很多 1px 介绍的文章全是以讹传讹,按照那些文章的说法确实会让人困惑为啥没有 2px 3px 4px...的问题,我之前了解下来的认知就是前端用的 1px 是 css 逻辑像素,设计稿的 1px 要的是物理像素,现在碰到这种设计稿 1px 边框我都直接省事写 0.5px
|
12
chnwillliu 2022-01-16 13:58:25 +08:00 via Android
Device pixe rate 是浏览器设置出来,并非屏幕硬件参数,更别说浏览器离真实屏幕参数还隔着操作系统层 /驱动层。所以一块 dpr=2 的屏幕这种说法是错误的。
|
13
chnwillliu 2022-01-16 17:16:08 +08:00 via Android
1px 在 dpr=2 的情况下会感觉粗,不是跟 dpr=1 的情况比会更粗,而是和设计稿件比,会更粗,不够细腻,实际你的设备若是高分屏的话是有能力显示更细腻的线条。0.5px 在高分屏渲染出来的线条和非高分屏下 1px 渲染出来的确实都是相同的物理像素,但是他们占的物理尺寸不一样,也就是你说的像素更密集。像素更密集也就是 PPI 更高,人眼看到的效果就是更精致细腻。
|
14
lizy0329 76 天前
正常情况下,dpr=2 时,iphone 会用 2 个物理像素去显示 1 个 css 像素,我们通常会用 REM 这种动态单位来处理这种情况
但 border 有点特殊,如果你用 rem 来写 border-width 的话,解释后的 px 会比 1 小,例如: 0.5px ,有很多 IOS 版本以及安卓压根不支持,直接降为 0 在视觉层面,使用 2/3 个物理像素渲染的 border 会有点宽,所以我们只能写 border-width: 1px 然后用 scale 来降低 |