html - CSS 宽度对不同的屏幕有何 react ？

Question

当我使用

.class { width: 800px; }

这到底是什么意思？

当我在笔记本电脑屏幕上查看它时，它正好显示为 800 像素宽。当我在平板电脑屏幕上查看它时，它显示为 1600 像素宽。我猜是因为我的平板电脑可能具有更高的像素密度。但是，元素的物理宽度(并排比较时)如果在平板电脑上比在我的笔记本电脑上小得多

所以，我的问题是:当我在 CSS 中为 HTML 元素定义维度时，引用是什么？它是如何在不同的显示器上计算或缩放的？

Answer 1

引用是一个逻辑坐标系，可以相对于物理屏幕进行缩放。

PC 上最常见的比例是 1:1。但是，随着屏幕变大，这种情况在计算机上越来越普遍，显示屏幕会放大，这也可能会影响浏览器。

用户还可以放大浏览器，这自然会影响缩放。

平板电脑和手机等设备在浏览器中的缩放比例通常为 2:1，有时甚至更高。这意味着浏览器报告较小的屏幕尺寸，并且所有内容都按比例放大。这也会影响媒体查询，因此即使物理屏幕更大，您的 CSS 也可能不适用，因为媒体查询使用浏览器报告的屏幕尺寸。

此外，如果您不使用元标记锁定视口(viewport)，移动浏览器将缩放页面以适合屏幕，因此无论您指定什么页面宽度，都会显示相同的大小。