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

[Ricepig]

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

[cheung]

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

[vilicvane]

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

[Ricepig]

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

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

[Keinez]

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

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

[dorentus]

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

[Ricepig]

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

[P233]

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

[Yuguo]

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

[Ricepig]

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

我的疑问在这里。

[laogui]

@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]

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

[Ricepig]

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

[P233]

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

[clowwindy]

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

[Ricepig]

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