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