使用Susy响应文本大小

Question

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

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

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

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

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

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

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

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

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

非常感谢帮助！谢谢！

Answer 1

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

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