twitter-bootstrap - 以像素为单位的物理宽度和 CSS 宽度有什么区别？

Question

我目前正在使用 Photoshop 为 future 的网站设计创建一系列线框。自然地，我希望网站能够响应；这将由 Bootstrap 提供帮助。

我将首先处理智能手机屏幕尺寸，然后相应地放大屏幕尺寸。

根据 Bootstrap，智能手机的范围通常在 480 像素到 767 像素之间。诚然，后者更基于平板电脑。

我有点不确定的是，当我查看手机规范时，物理屏幕宽度远大于 CSS 宽度。

让我们以 HTC One 手机为例。 CSS 屏幕尺寸为 360px x 640px，而物理屏幕宽度为 1080px x 1920px。关于宽度，这表明物理屏幕宽度是网站 CSS 宽度的 3 倍。看了几个网站，在HTC One上，网站的宽度肯定不会比实际屏幕的物理宽度小3倍。

我只是想知道我是否误解了这里的内容。例如，在测量物理屏幕时，像素的大小可能不同。

Answer 1

CSS 宽度是浏览器/CSS 使用的宽度。

物理宽度告诉您物理屏幕将多少像素打包到每个 css 像素中，即现代高密度屏幕可以将 2 倍或 3 倍的像素打包到每个 css 像素中。关键字“视网膜”屏幕。

如果将 1080 像素(物理)除以 360 像素(CSS)，您将得到 3。这意味着该屏幕的像素密度是普通老式屏幕的 3 倍。

结果:该设备的图像需要比正常 css 大小大 3 倍才能在该设备上显得清晰(而不是模糊)。

因此，为了 Photoshop 线框图，您只想使用 css 宽度。但是在稍后创建实际图像时，您可能希望它们具有 3 种不同的尺寸:

1) 普通(与 css 宽度相同)

2) 对于像素密度为 2 倍的屏幕，屏幕要大 2 倍

3) 3 倍像素密度的屏幕大 3 倍。

编辑:

这是一段令人惊叹的慢动作视频，它准确地展示了高密度屏幕上发生的事情。观察每个单独的像素如何不仅包含 3 个不同的颜色像素，而且每个颜色像素如何包含多个物理像素:https://youtu.be/3BJU2drrtCM?t=7m30s