Question

当我使用

时

.class { width: 800px; }

它究竟意味着什么？

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

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

Answer 1

参考是一个逻辑坐标系，可以根据物理屏幕进行缩放。

在PC上最常见的是比例为1：1。然而，随着屏幕越来越大，随着显示器规模扩大的计算机变得越来越普遍，这也可能会影响浏览器。

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

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

此外，如果您不使用元标记锁定视口，移动浏览器将缩放页面以适应屏幕，因此您指定的页面宽度将显示相同的大小。