html - 以百分比理解 CSS 数字属性

Question

我在理解以百分比表示的 CSS 数字属性时遇到了一些问题。

在这种特殊情况下，为了始终正确显示我的页面，我认为最好的方法是始终以 % 定义数字属性，例如宽度、高度或字体大小。

现在让我吃惊的是以下几点:

在分辨率为 1920x1080 且浏览器处于全屏模式时，放大和缩小只会影响 font-size。为什么？我认为百分比值总是指父节点的值，而且由于我从

开始

html{
    width:100%;
    height:100%;
}

缩放时 font-size 也应该是静态的，因为 html 的大小 resp。 body 没有改变。

在分辨率为 800x600 且浏览器处于全屏模式时，显然内容会缩放，因为 html 响应。 body 本身没那么高，但是 font-size 太大了。让我向您展示这个比较:

很明显，这让我认为 font-size 中的百分比值不是指 父节点 的高度。所以最基本的问题是:如果我想实现页面的元素和字体在比方说普通笔记本和分辨率较低的上网本上都能很好地显示，我应该如何处理这些值？另外，当用户缩放时，页面的行为也很可爱？

附录:我没有粘贴任何代码，因为这对我来说似乎是一个普遍的问题。

Answer 1

您可以使用 small、large、x-small、x-large 等定义文本大小. 一组值而不是直接在 px 中定义它们。这会给你一个更“相对”的结果。

我倾向于使用的另一个选项是 pt。 CSS 中的 1pt 相当于 1/72 英寸。如何为给定屏幕定义英寸是另一回事，但在可能成为问题的电话等设备上的浏览器往往会解决这些问题。

要记住的最后一点是 CSS 像素与屏幕像素不同。这并不简单:

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

不完全科学吧？基本上这意味着你不必担心像视网膜显示器这样的东西，它与普通电脑屏幕相比具有巨大的像素密度。所有这些都说明几乎所有 CSS 测量在某种程度上都是相对的。将您的代码编写得健壮并在大多数情况下都能正常工作，但是当您遇到像您一样的奇怪问题时，请不要感到惊讶。