V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Ricepig
V2EX  ›  CSS

Retina+Safari,CSS中的1px实际上是1px吗?

  •  
  •   Ricepig ·
    ricepig · 2013-07-27 22:52:22 +08:00 · 6293 次点击
    这是一个创建于 4126 天前的主题,其中的信息可能已经有所发展或是发生改变。
    css指定的以px为单位的尺寸,对应屏幕像素还是1:1吗?
    15 条回复    1970-01-01 08:00:00 +08:00
    cheung
        1
    cheung  
       2013-07-27 22:53:48 +08:00
    http://isux.tencent.com/responsive-web-design.html
    文章下面有说道1px实现方法
    vilic
        2
    vilic  
       2013-07-27 22:58:49 +08:00
    retina 或者类似的屏幕应该不是, 其他情况下如果无缩放应该是.
    Ricepig
        3
    Ricepig  
    OP
       2013-07-27 23:19:13 +08:00
    @cheung 谢谢你的文章,不过文章里有一句话:

    “高DPI媒体查询规则将在下一篇文章中做详解,敬请期待”
    Keinez
        4
    Keinez  
       2013-07-27 23:25:33 +08:00 via Android
    我觉得用em应该好一些,省去px的麻烦,只需要处理图片就行……

    没有retina设备所以不关注也没办法关注这些东西……
    dorentus
        5
    dorentus  
       2013-07-27 23:29:42 +08:00
    占了双倍物理像素的 1px 还是 1px 吧
    Ricepig
        6
    Ricepig  
    OP
       2013-07-28 00:02:47 +08:00
    @dorentus 四倍物理像素。但是pixel这个单位我没有理解错就应该是指像素。
    P233
        7
    P233  
       2013-07-28 00:11:50 +08:00
    这个 1px 肯定是相对于显示器分辨率的 1px,retina 接收到的也是 1px,那套算法变成了四倍物理像素,跟 CSS 无关
    Yuguo
        8
    Yuguo  
       2013-07-28 00:11:53 +08:00
    retina用户告诉你,是用4个点来渲染普通屏幕上1个点,safari跟chrome都是。
    Ricepig
        9
    Ricepig  
    OP
       2013-07-28 00:38:21 +08:00
    @P233 问题是这里出现了一个语义上的问题,px这个单位就是指像素,为何又被转换为了多个像素呢?

    我的疑问在这里。
    laogui
        10
    laogui  
       2013-07-28 00:44:17 +08:00
    @Keinez em也是基于px的。

    目前针对retina还得借助于css的Media Queries,和响应式设计一样。做两种大小的图片,用Media让它在高分屏上调用大的那张,下面是个例子:

    @media all and (-webkit-min-device-pixel-ratio: 1.5) {.logo { background-image: url(../images/[email protected]); background-size: 250px 300px; }
    }
    P233
        11
    P233  
       2013-07-28 00:48:50 +08:00
    CSS 中的 1px 肯定不是指物理像素,而是分辨率像素。比如一台 1920*1080 物理像素的显示器,把分辨率调成 1344*756 ,网页中的 1px 是根据分辨率显示的。Retina 需要反向理解,而且 retina 是固定将每个像素点放大4倍,好像没有特别神奇的地方。
    Ricepig
        12
    Ricepig  
    OP
       2013-07-28 01:03:19 +08:00
    @P233 好吧,即使是分辨率像素,retina的处理方式也出现了不太一致的地方。这个东西不神奇,反倒觉得有点别扭。所有px都变成了1/2 px,唯独图片不一样。
    P233
        13
    P233  
       2013-07-28 01:13:19 +08:00
    其实图片也变了,比如 100*100 的图片,放到 retina 屏幕上看,变成了 200*200 自然不清楚。而把一张 200*200 的图片缩放到 100*100,在普通屏幕上没区别,但到了 retina 上就刚刚好了。
    clowwindy
        14
    clowwindy  
       2013-07-28 12:54:01 +08:00
    不是,苹果重新发明了像素。
    Ricepig
        15
    Ricepig  
    OP
       2013-07-28 13:36:04 +08:00
    @clowwindy 苹果又一次改变了世界,期待改变人类!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6017 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 02:16 · PVG 10:16 · LAX 18:16 · JFK 21:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.