如何全球扩展我的网站的大小？

Question

我使用Hugo构建了一个个人网站，我喜欢它的结果，但有一个例外：所有元素都有点过大。放大浏览器可以平滑地减少全球所有组件的规模，75％变焦的网站看起来更好看。

是否可以全局缩小Hugo或CSS中所有组件的比例，以便所有组件的默认比例更小？我更喜欢全局范围，而不是为每个组件手动添加一个缩放参数。

网站：http://www.markbuckler.com/

代码：https://github.com/mbuckler/personal-website

100％放大（当前）：

75％放大（我希望100％看起来像）：

Answer 1

添加到＆＃39; html＆＃39;标签＆＃39; font-size：16px＆＃39;并重写所有字体大小，宽度，高度等以使用rem（您设置为16px的全局字体大小的比率）。

div的宽度： 宽度：1.5rem; （16px * 1.5）

这样您就可以根据单个值扩展整个网站。

Answer 2

您可以尝试使用scale() transform作为快速简便的解决方案，但是从长期来看，找到一个不那么糟糕的解决方案并在不使用转换的情况下进行正确的布局可能会更好。

也许还有兴趣：What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?