物理宽度和以像素为单位的 CSS 宽度有什么区别？答案

【问题标题】：What is the difference between a physical width and CSS width in pixels?物理宽度和以像素为单位的 CSS 宽度有什么区别？
【发布时间】：2018-01-20 00:31:02
【问题描述】：

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

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

根据 Bootstrap，智能手机的范围一般在 480px 到 767px 之间。不可否认，后者更基于平板电脑。

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

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

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

【问题讨论】：

注意您可以在 CSS 中使用的各种度量单位 - 您可能想要使用 px css units 以外的其他单位 - 我已经看到许多网站现在使用 rem 来实现可扩展性单位。你有像vh 这样的东西 “等于视口初始包含块高度的 1%。”
谢谢你。我没听说过rem。这是em 的变体吗？

标签： twitter-bootstrap css responsive-design pixel

【解决方案1】：

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

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

如果您将 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

【讨论】：

感谢您的洞察力。例如，您是说像素密度为 3 的手机基本上是说它们适合每个“手机”像素 3 个 CSS 像素；从而提供显示更清晰图像的机会？
或多或少。通常只有一个像素是手机的 3 个物理像素的组合。因此，手机在每个 css 像素中都包含更多像素，从而使画面看起来比正常情况更清晰，因为这样分辨率更高。
手机基本上是在尝试将图像的分辨率从 100 dpi 提高到 300 dpi 时做同样的事情。原理是一样的。更高的分辨率 = 更清晰的图像。
明白了！谢谢你。我最初的印象是物理像素尺寸是指实际屏幕尺寸。
这是一段令人惊叹的慢动作视频，它准确地展示了高密度屏幕上正在发生的事情。观看每个单独的 css 像素如何不仅由 3 个不同的颜色像素组成，而且每个颜色像素如何由多个物理像素组成：youtu.be/3BJU2drrtCM?t=7m30s

【解决方案2】：

在像素密度非常高的设备发布的那一刻，市场上的所有软件/网站都会变得太小且无法阅读，因此没有人会购买这些设备。供应商引入了逻辑像素，以便现有网站可以照常呈现，但字体和矢量图标看起来会更平滑，因为物理像素小于逻辑像素会产生额外的清晰度。

【讨论】：