Retina+Safari，CSS中的1px实际上是1px吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 4171 天前的主题，其中的信息可能已经有所发展或是发生改变。

css指定的以px为单位的尺寸，对应屏幕像素还是1：1吗？

1px

CSS

15 条回复 • 1970-01-01 08:00:00 +08:00

cheung

2013-07-27 22:53:48 +08:00

http://isux.tencent.com/responsive-web-design.html
文章下面有说道1px实现方法

vilic

2013-07-27 22:58:49 +08:00

retina 或者类似的屏幕应该不是, 其他情况下如果无缩放应该是.

Ricepig

2013-07-27 23:19:13 +08:00

@cheung 谢谢你的文章，不过文章里有一句话:

“高DPI媒体查询规则将在下一篇文章中做详解，敬请期待”

Keinez

2013-07-27 23:25:33 +08:00 via Android

我觉得用em应该好一些，省去px的麻烦，只需要处理图片就行……

没有retina设备所以不关注也没办法关注这些东西……

dorentus

2013-07-27 23:29:42 +08:00

占了双倍物理像素的 1px 还是 1px 吧

Ricepig

2013-07-28 00:02:47 +08:00

@dorentus 四倍物理像素。但是pixel这个单位我没有理解错就应该是指像素。

P233

2013-07-28 00:11:50 +08:00

这个 1px 肯定是相对于显示器分辨率的 1px，retina 接收到的也是 1px，那套算法变成了四倍物理像素，跟 CSS 无关

Yuguo

2013-07-28 00:11:53 +08:00

retina用户告诉你，是用4个点来渲染普通屏幕上1个点，safari跟chrome都是。

Ricepig

2013-07-28 00:38:21 +08:00

@P233 问题是这里出现了一个语义上的问题，px这个单位就是指像素，为何又被转换为了多个像素呢？

我的疑问在这里。

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

2013-07-28 00:48:50 +08:00

CSS 中的 1px 肯定不是指物理像素，而是分辨率像素。比如一台 1920*1080 物理像素的显示器，把分辨率调成 1344*756 ，网页中的 1px 是根据分辨率显示的。Retina 需要反向理解，而且 retina 是固定将每个像素点放大4倍，好像没有特别神奇的地方。

Ricepig

2013-07-28 01:03:19 +08:00

@P233 好吧，即使是分辨率像素，retina的处理方式也出现了不太一致的地方。这个东西不神奇，反倒觉得有点别扭。所有px都变成了1/2 px，唯独图片不一样。

P233

2013-07-28 01:13:19 +08:00

其实图片也变了，比如 100*100 的图片，放到 retina 屏幕上看，变成了 200＊200 自然不清楚。而把一张 200＊200 的图片缩放到 100*100，在普通屏幕上没区别，但到了 retina 上就刚刚好了。

clowwindy

2013-07-28 12:54:01 +08:00

不是，苹果重新发明了像素。

Ricepig

2013-07-28 13:36:04 +08:00

@clowwindy 苹果又一次改变了世界，期待改变人类！