javascript - 将网页缩小到 90%

Question

当您在任何浏览器上按下 Ctrl+- 时，页面会缩小到原始大小的 90%。我需要复制它，并默认以原始网页的 90% 打开我的网页，而不是 100%，因为它在 90% 时看起来更好。

我尝试了提到的最常见的方法 here , here , 和 here ，所有这些基本上都是告诉您将此代码块添加到您的 css 中。

html
{
    zoom: 0.9; /* Old IE only */
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

这样做的问题是它在左侧和右侧产生了一个间隙，在顶部也产生了一个巨大的间隙，当您通过 ctrl< 手动缩小尺寸时，这些间隙不会出现+-.

这就是我使用上述代码时发生的情况——注意左侧、右侧和顶部的间隙。

虽然这是我想要的 - 当您在浏览器中手动执行 ctrl+ - 时会发生这种情况。

我该怎么做？

编辑:正如 Jonathon 在评论中所说，如果我的页面在 90% 时看起来更好，我应该将它设计成那样，而不是必须缩小。问题是我正在使用 this default template ，而且我更喜欢 90% 而不是完整的 100%。

Answer 1

您需要在 CSS 中使用/转换为相对单位。 % 或 em 或 rem。

然后在正文级别，您可以设置一个绝对大小，使相对度量重新计算为您想要的值。

如果您只使用 em 或 ex: 您为 body 声明 font-size: 90%，您将能够即时调整。

这一切都取决于您选择的单位，将它们设为相对单位将使您获得现在正在寻找的那种自由。