首页 文章

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

提问于
浏览 次
4

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

不容易 . 它's basically not possible to set the '默认'font-size到 rem-base 以外的其他值而不破坏网格 . 如果 $rem-base: 16px 和 $base-font-size: 100% 一切正常 - 我只想要更大的字体 . 如果 $rem-base: 16px 和 $base-font-size: 22px 网格计算为1815px而不是1320px . 当然，因为设置html字体大小设置rem单位和其他所有font-size指的是rem .

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

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

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

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

干杯

sass zurb-foundation

2 回答

  • 1

    根据_settings.scss文件'如果你想让你的基本字体大小不同而不影响网格断点，请将$ rem-base设置为$ base-font-size并确保$ base-font-size是一个px值 . '

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

    所以它来自：

    // 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;

    这不是我以前做过的事情，但希望它对你有所帮助！

    回复于
  • 6

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

    例如 .

    // 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;
    回复于

相关问题