Question

我希望我的网格在1320px的行中有24列。我还希望将默认（正文）字体大小设置为22px。让我告诉你如何使用SASS / SCSS和Zurb Foundation轻松完成这项工作......等等，什么？

不容易。基本上无法设置默认值＆＃39; font-size到rem-base以外的其他值而不破坏网格。如果$rem-base: 16px和$base-font-size: 100%一切正常 - 我只想要更大的字体。如果$rem-base: 16px和$base-font-size: 22px网格计算为1815px而不是1320px。当然，因为设置html字体大小会设置 rem 单元，其他所有字体大小都会指向 rem 。

在_global.scss（V 5.2.1）处更改第345,346行并将它们设置为不同的vars

html { font-size: $rem-base; }
body { font-size: $base-font-size; }

不会影响p，ul等的字体大小

所以问题仍然存在：如何使用Foundation5 SCSS获得基本尺寸为22px的1320/24网格？

干杯

Answer 1

根据_settings.scss文件＆＃39;如果您希望基本字体大小不同而不影响网格断点，请将$ rem-base设置为$ base-font-size并确保$ base-font-size是px值。＆＃39;

这就是我所做的和字体大小增加，但网格保持不变（尽管你需要移动$ rem-base所以它在$ base之后） -font尺寸。）

所以它来自：

// This is the default html and body font-size for the base rem value.

 $rem-base: 16px;
 $base-font-size: 100%;

要：

// This is the default html and body font-size for the base rem value.

$base-font-size: 22px;
$rem-base: $base-font-size;

这不是我以前做过的事情，但希望它可以帮到你！

Answer 2

如果您需要在保持网格内容的同时更改$base-font-size，则必须将$base-font-size和$rem-base设置为相同的值。无需更改标准基础_settings.scss中的行。

E.g。

// This is the default html and body font-size for the base rem value.
$rem-base: 14px;

// Allows the use of rem-calc() or lower-bound() in your settings
@import 'foundation/functions';

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: $rem-base;

Zurb F5：改变base-font-size和rem-base令人困惑

2 个答案: