使用 Susy 响应式调整文本大小

Question

我刚刚开始使用 Susy，遇到了一些问题，经过几个小时的谷歌搜索，我似乎找不到合适的答案。

据我所知，Susy 使用 em 来配置列。当我想调整我的文本大小时，我的问题就出现了。

具体来说，我在布局中使用rems，我必须设置以下内容：

html {
    font-size: 125%; // for 20px base font size
}

在较小的视口上，我想将正文文本调整为 16 像素。

html {
    font-size: 100%; // resizes to 16px
}

问题是，为什么我这样做，插入到网格中的值会发生变化，并且一切都变窄了。

我将 rems 用于顶部和底部填充，并且我设想将 susy 用于左右填充。这意味着如果我更改字体大小，整个页面就会变得混乱，因为网格突然变得非常狭窄。

我相信有办法解决这个问题，但我似乎完全没有任何想法。或者也许我以错误的方式接近响应式设计？

非常感谢您的帮助！谢谢！

Answer 1

您可以阻止容器元素调整大小，也可以在移动视图中使用更多列。

Susy 将使用您想要的任何单位构建网格。您可以完全控制设置。事实上，实际的网格本身通常在内部使用% 单元构建——只有容器应用了其他单元。如果您手动或使用$container-width 设置覆盖容器大小，列将调整以填充容器。对于小屏幕，您可以将容器宽度设置为 100%，然后在大屏幕上使用默认的 susy 宽度。