Question

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

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

现在让我感到惊讶的是：

在1920x1080分辨率和全屏模式下的浏览器中，放大和缩小仅影响font-size。为什么？我认为百分比值总是指parent node的值，因为我从

开始

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

font-size在缩放时也应该是静态的，因为html的大小也是如此。 body不会改变。

在800x600分辨率下，浏览器处于全屏模式，显然内容会缩放，因为html分配。 body本身不是更高，但font-size太大了。让我告诉你这个比较：

enter image description here

现在很明显，这让我觉得font-size中的百分比值并不是parent node的高度。因此，基本的问题是：如果我想实现一个页面的元素和字体显示得很好，让我们说一个普通的笔记本和一个分辨率较低的上网本，我应该如何处理这些值？另外，当用户放大时，页面的行为也很可爱？

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

Answer 1

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

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

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

如果输出设备的像素密度与此非常不同在典型的计算机显示器中，用户代理应该重新缩放像素值。建议参考像素为视角像素密度为96dpi和距离的设备上的一个像素来自一个公平的读者。

不完全科学呃？基本上这意味着你不必担心像普通电脑屏幕那样具有巨大像素密度的视网膜显示器。所有这些都说明几乎所有的CSS测量都是以某种方式相对的。编写你的代码是健壮的，并在大多数情况下工作，但是当你遇到像你一样的奇怪的打嗝时不要感到惊讶。