1

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

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

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

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

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

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

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

在此处输入图像描述

现在很明显，这让我认为 in 的百分比值font-size并不是指parent node. 所以基本问题是：如果我想实现页面的元素和字体在普通笔记本和分辨率较低的上网本上显示良好，我应该如何处理这些值？另外，当用户缩放时页面的行为也很可爱？

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

4

1 回答 1

1

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

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

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

如果输出设备的像素密度与典型的计算机显示器的像素密度有很大不同，用户代理应该重新调整像素值。建议参考像素为像素密度为96dpi、距离阅读器一臂远的设备上一个像素的视角。

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

于 2012-12-08T18:42:20.543 回答