V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qqqq11
V2EX  ›  前端开发

请教一下前端的 1px 问题

  •  
  •   qqqq11 · 2021-12-23 12:46:14 +08:00 · 2161 次点击
    这是一个创建于 1064 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在面试中被问到了 1px 的显示问题,在网上查了一下,看过之后有几个疑问

    1. 有的文章说到产生 1px 问题的原因是因为 dpr
      当 1dpr 时,1px 对应 1x1 个物理像素点
      当 2dpr 时,1px 对应 2x2 个物理像素点
      然后文章得出结论说,所以在(dpr=2 时,0.5px)=(dpr=1 时,1px)
      不太能理解,我的疑问是,如果在两块尺寸大小相同的屏幕上,一块dpr=1,另一块dpr=2,那么它们渲染1px这个单位的时候,实际在屏幕上渲染出来的大小不是相同的吗?只是渲染这 1px 所用的像素点更密集了而已,但是大小还是一样的吧?为什么会出现差异,使得看起来在 dpr=2 的屏幕上 1px 的边框更粗了?

    2. 为什么都说 1px 问题,而不会有其它尺寸的问题呢?
      如果我在 dpr=2 的屏幕上画一条设计稿上的 2px 的边框,那我为了还原设计师的原稿效果,我是不是还要把设计稿上的 2px 换成 1px ? 8px 换成 4px ?为什么就不会有这种说法呢?

    14 条回复    2024-08-21 15:14:27 +08:00
    cyrbuzz
        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 缩小应该是比较容易写兼容性也不错的解决方案。
    shuxhan
        2
    shuxhan  
       2021-12-23 13:25:15 +08:00
    这让我想到了谷歌的 12px 问题,都可以用 scale 处理
    qqqq11
        3
    qqqq11  
    OP
       2021-12-23 13:40:04 +08:00
    @cyrbuzz 所以就是可以理解为,并不是 dpr 的问题,只是与设计师出图的尺寸相关,是这样吗?
    vaporSpace
        4
    vaporSpace  
       2021-12-23 13:47:58 +08:00
    1 、我觉你说的没错,在同等屏幕尺寸下 dpr2 只是因为显示单元多,让显示更细腻,并不会存在 1px 的边框更粗的问题; 2 、移动端开发直接按设计给的 2 倍图开发就行,因为你使用的 vw/rem 单位会根据屏幕宽度去调整实际显示的 px ;

    不知道我是否理解你的问题,具体你可以看下我这篇: https://juejin.cn/post/6997940376052957220
    mxT52CRuqR6o5
        5
    mxT52CRuqR6o5  
       2021-12-23 14:01:10 +08:00
    有时候设计就是想要物理屏幕中的 1 像素的显示效果,也就是希望 [两块尺寸大小相同的屏幕上,一块 dpr=1 ,另一块 dpr=2] 这两块屏幕上的显示效果不一样
    3dwelcome
        6
    3dwelcome  
       2021-12-23 14:16:01 +08:00
    前端在手机上的 1px 有误导嫌疑,并不是 PC 这种真的一个像素,确实导入了 DPI 概念。

    但是你设计的时候,也是可以控制的,viewport 属性里有 target-densitydpi ,只要两款手机 DPI 设置一样,那么绘制出来的 1px ,就是真的一个像素。

    否则默认情况下,1px 只是网页虚拟像素。需要乘以 DPI ,才能换算到真实屏幕像素。
    cyrbuzz
        7
    cyrbuzz  
       2021-12-23 17:21:57 +08:00
    @qqqq11

    好像可以这么理解...我是这么想的= =。

    不过设计师之所以要出 2 倍图就是因为以 iPhone6 的 DPR=2 为参照物来的(没深究过是不是确实是这样),所以还是和 DPR 有关。
    Biwood
        8
    Biwood  
       2021-12-23 18:26:21 +08:00
    “尺寸大小相同的屏幕上”渲染出来的 1px 用肉眼看必然也是一样大小,不可能更粗。出现 1px 更粗的情况,100%是因为“尺寸大小不相同”。
    zqx
        9
    zqx  
       2021-12-24 06:13:15 +08:00 via Android
    有些设备同样尺寸屏幕上可以塞下 2 倍多的可独立渲染的像素点,所以同样写 1px ,有些设备看起来粗,有些细。
    既然人家的屏幕质量更好,顺其自然才对,才符合用户心理,不应该再用 scale 去强行渲染所谓的 0.5px ,包括 iPhone X 的什么安全区也一样,在代码里加 padding 是错误行为。
    Ausmo
        10
    Ausmo  
       2021-12-24 11:33:21 +08:00
    网上很多 1px 介绍的文章全是以讹传讹,按照那些文章的说法确实会让人困惑为啥没有 2px 3px 4px...的问题,我之前了解下来的认知就是前端用的 1px 是 css 逻辑像素,设计稿的 1px 要的是物理像素,现在碰到这种设计稿 1px 边框我都直接省事写 0.5px
    binaryify
        11
    binaryify  
       2021-12-27 08:21:52 +08:00 via iPhone
    @Ausmo 会有兼容性问题的,一些安卓机直接不显示
    chnwillliu
        12
    chnwillliu  
       2022-01-16 13:58:25 +08:00 via Android
    Device pixe rate 是浏览器设置出来,并非屏幕硬件参数,更别说浏览器离真实屏幕参数还隔着操作系统层 /驱动层。所以一块 dpr=2 的屏幕这种说法是错误的。
    chnwillliu
        13
    chnwillliu  
       2022-01-16 17:16:08 +08:00 via Android
    1px 在 dpr=2 的情况下会感觉粗,不是跟 dpr=1 的情况比会更粗,而是和设计稿件比,会更粗,不够细腻,实际你的设备若是高分屏的话是有能力显示更细腻的线条。0.5px 在高分屏渲染出来的线条和非高分屏下 1px 渲染出来的确实都是相同的物理像素,但是他们占的物理尺寸不一样,也就是你说的像素更密集。像素更密集也就是 PPI 更高,人眼看到的效果就是更精致细腻。
    lizy0329
        14
    lizy0329  
       92 天前
    正常情况下,dpr=2 时,iphone 会用 2 个物理像素去显示 1 个 css 像素,我们通常会用 REM 这种动态单位来处理这种情况

    但 border 有点特殊,如果你用 rem 来写 border-width 的话,解释后的 px 会比 1 小,例如: 0.5px ,有很多 IOS 版本以及安卓压根不支持,直接降为 0

    在视觉层面,使用 2/3 个物理像素渲染的 border 会有点宽,所以我们只能写 border-width: 1px 然后用 scale 来降低
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3696 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 00:15 · PVG 08:15 · LAX 16:15 · JFK 19:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.