我目前正在使用Photoshop来创建一系列线框图，用于未来的网站设计。 当然，我希望网站能够响应;这将由Bootstrap帮助。
我将首先使用智能手机屏幕尺寸，然后相应地放大屏幕尺寸。
根据Bootstrap的说法，智能手机通常在480px到767px之间。 诚然，后者更基于平板电脑。
我有点不确定的地方是，当我查看手机规格时，物理屏幕宽度远大于CSS宽度。
让我们以HTC One手机为例。 CSS 屏幕尺寸为 360px x 640px，而物理屏幕宽度为 1080px x 1920px。 参考宽度，这表明物理屏幕宽度是网站 CSS 宽度的 3 倍。 在查看了一些网站后，在HTC One上，网站的宽度肯定不会比实际屏幕的物理宽度小3倍。
我只是想知道我是否误解了这里的东西。 例如，例如，在测量物理屏幕时，像素可能具有不同的大小。
CSSwidth 是浏览器/CSS 使用的宽度。
物理宽度告诉您物理屏幕在每个 css 像素中打包了多少像素，即现代高密度屏幕在每个 css 像素中可以包含 2 倍或 3 倍以上的像素。关键字"视网膜"屏幕。
如果你把 1080px(物理)除以 360px(css)，你会得到 3。这意味着与普通的老式屏幕相比，该屏幕的像素密度是普通屏幕的 3 倍。
后果：该设备的图像需要比正常 css 大小大 3 倍，才能在该设备上显示清晰(而不是模糊)。
因此，为了Photoshop线框图，您只想使用css宽度。但是，在以后创建实际图像时，您可能希望它们具有3种不同的大小：
1)正常(与css宽度相同)
2) 像素密度为 2 倍的屏幕大 2 倍
3) 像素密度为 3 倍的屏幕大 3 倍。
编辑：
这是一个惊人的慢动作视频片段，准确地显示了高密度屏幕上发生的事情。观看每个像素如何不仅由 3 个不同颜色的像素组成，还包括每个颜色像素如何由多个物理像素组成：https://youtu.be/3BJU2drrtCM?t=7m30s
在发行具有非常高像素密度的设备时，市场上的所有软件/站点都将变得太小且不可读，因此没有人会购买这些设备。供应商引入了逻辑像素，以便现有站点将照常呈现，但字体和矢量图标看起来更平滑，因为由于物理像素小于逻辑像素，因此具有额外的清晰度。