css - 智能手机网页设计 - 像素大小

Question

我需要有人帮助澄清我对高密度屏幕新手机像素大小的理解。因为，它在我的网页设计中扔了一个曲线球。

我对智能手机的最初理解是像素大小大约为 480 x 320，这使得设计变得容易，因为像素仍然是相同的像素。

但是，有些智能手机的性能是这个的两倍(或更多)。我相信 iPhone 的分辨率确实是 960 x 640 的两倍。我的 Galaxy Nexus 是 1280 x 720。

现在，这在使用 %'s 时工作得很好。但是，有很多事情我想使用固定像素值。例如，许多高度值不需要在 %s 中。此外，如果高度是固定的，一些元素，如 Logo 、图标、一些图片，我不希望在宽度变宽时被拉长...因此这些将需要一致的值。

但是，当像素不是真正一致的物理测量值时，我该如何处理？

使用示例会更容易，所以如果有人可以向我解释，请以图标为例。

当我在手机上登录 Facebook 时，我会在导航栏中看到这三个通知图标(好友请求、消息和其他)。这些是固定的。无论我的手机是直立还是侧放，它们的尺寸都完全相同。唯一随宽度变化的是...之间的空间……本质上是我工作的目的。

这些图标的尺寸是多少？首先，我知道标准图标通常是 16x16。那么，在这些高密度智能手机上是否需要 32x32？但是，它们似乎也与我在桌面上看到的 16x16 图标大小不同。他们看起来可能更像 12x12。所以，不确定，但我认为智能手机和台式机有不同的“标准”图标大小(那会是什么？)。

无论如何，我已经有 CSS 表明正在使用手机来实现我的移动布局。但是，我是否必须更进一步才能识别像素密度，然后将我的固定值调整为在这种情况下加倍？还是有另一种/更好的方法？

感谢任何帮助。我有点难过，关于这方面的信息并不多。感谢和抱歉这篇冗长的帖子!

Answer 1

设备像素密度列表: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/您的问题可能是比率的变化。

这是一篇很好的文章，涵盖了一些我个人喜欢引用的响应式研究

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

跳到最后；例如，iPhone 4 Retina 显示屏是像素密度的两倍，这里是上面针对它的文章中的示例(尚未测试) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

另一篇文章提供了一些关于必须制作具有不同 ppi 的 2 张图像的信息 http://bjango.com/articles/designingforretina/

我个人使用 Twitter 的 Bootstrap 及其 Responsive 插件来使用 CSS 进行设计布局: http://twitter.github.com/bootstrap/scaffolding.html#responsive