如何在全球范围内扩展我的网站规模？答案

【问题标题】：How to globally scale the size of my website?如何在全球范围内扩展我的网站规模？
【发布时间】：2018-02-26 15:23:32
【问题描述】：

我使用Hugo 建立了一个个人网站，我喜欢它的结果，但有一个例外：所有元素都有点太大了。在浏览器中放大能够平滑地减少全局所有组件的比例，并且 75% 缩放的网站在我看来要好得多。

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

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

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

100% 缩放（当前）：

在 75% 缩放时（我希望 100% 的样子）：

【问题讨论】：

标签： css hugo

【解决方案1】：

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

div 的宽度：宽度：1.5rem； (16px * 1.5)

通过这种方式，您可以基于单个值扩展整个网站。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

define your container max-width:1024px or anything you want and margin:0 auto;

.main-container{
    max-width:1024px; /* you can change according to your website */
    margin:0 auto;
}

【讨论】：