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

css 像素是啥?

  •  
  •   chaleaochexist · 2019-09-02 20:34:51 +08:00 · 2825 次点击
    这是一个创建于 1902 天前的主题,其中的信息可能已经有所发展或是发生改变。
    简单来说.
    1. 100px * 100px 的方块 在 27 寸 2K 显示器和 4K 显示器的浏览器中,看起来的大小是一样的吗?
    2. 2K 显示器 我想做一个 铺满全屏的红色方块, 长款定义多少 px? 手机浏览器呢? 4K 显示器呢?

    谢谢.
    10 条回复    2019-09-04 09:45:22 +08:00
    SuperMild
        1
    SuperMild  
       2019-09-02 20:41:45 +08:00
    假设显示器设定没有百分比缩放,你指定像素铺满 2K,那么用 4K 的看就铺不满。

    css 除了像素单位,还可以用百分比单位。
    qq316107934
        2
    qq316107934  
       2019-09-02 20:56:37 +08:00
    想做到大小一样,除了 pixel 还需要知道 dpi。
    good1uck
        3
    good1uck  
       2019-09-02 21:04:26 +08:00 via Android
    逻辑像素
    good1uck
        4
    good1uck  
       2019-09-02 21:04:54 +08:00 via Android
    硬件的像素是物理像素
    chaleaochexist
        5
    chaleaochexist  
    OP
       2019-09-03 08:47:34 +08:00
    @SuperMild 那前端一般是如何处理这个情况的?
    我不是前端.但是看前端代码很多都是用 px,现在 4K 显示器越来越普及,如何处理?
    现在前端一般如何处理这种情况?(主流做法)
    还是说如果用 4K 显示器,一般都缩放 200%.

    谢谢您.
    SuperMild
        6
    SuperMild  
       2019-09-03 08:54:57 +08:00
    @chaleaochexist 我也不是前端,css 应该有一些函数可以获取屏幕像素或 dpi 之类的,然后可以对主流屏幕像素做一套优化样式,剩下的就走一套默认样式。

    但是一般个人项目来说没必要做这么细,需要占满全屏的就用百分比单位,不需要占满全屏的就做居中排版,检测到屏幕较宽就加侧边栏,屏幕窄就隐藏侧边栏。
    SuperMild
        7
    SuperMild  
       2019-09-03 08:56:34 +08:00
    @chaleaochexist 比如你看 V2EX 这里就是做居中排版,宽的屏幕就两边留白多一点,一般用户会自己放大网页显示比例。
    chaleaochexist
        8
    chaleaochexist  
    OP
       2019-09-03 09:15:14 +08:00
    @SuperMild 我可不可以这么理解.目前我们前端静态网页的开发,默认分辨率是 2K?
    SuperMild
        9
    SuperMild  
       2019-09-03 09:41:17 +08:00   ❤️ 1
    @chaleaochexist 应该没有默认的说法,一般网站上线后都可以看到访客统计,可以看到哪种屏幕占多少比例,然后对高比例的优化。不同的网站用户特点可能不同。

    参考 https://www.jianshu.com/p/58e7b9836504
    yimity
        10
    yimity  
       2019-09-04 09:45:22 +08:00
    你可以不直接写 pixel , 可以写 百分比。
    另外:假如 27 寸设备的物理像素是 4K(3840×2160)那么这个是物理像素的点,就是显示器上小灯泡的数量。
    但是按照这样显示出来一个 100*100 的方块,会非常小。所以为了不让它那么小,设备厂商会定义一个比值就是 DPR(devicePixelRatio),也就是我让 10 个物理像素,在逻辑上显示一个点,那么这个值就是 10. 这个时候这个比值(物理像素除以 DPR )就是一般开发中的 CSS 像素。也就是你写 CSS 中 10px 等于实际显示器 100px。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2628 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:30 · PVG 23:30 · LAX 07:30 · JFK 10:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.