在CSS中改变Zurb基础网格的断点

提问于 2024-04-28T17:37:09+08:00

浏览次

1

如何通过css而不是SaSS更改Zurb Foundation块的断点？

例如，在我的代码中我定义了 large-block-grid-3 和 medium-block-grid-2 ，但它看起来很小的方式并不符合我的喜好，我希望它以不同的宽度打破 . 我希望能够声明一个列网格，但仅限于特定的自定义宽度 .

2 回答

2
在css中，您将搜索要更新的媒体查询的所有引用，并根据需要进行更改 . _settings.css中的媒体查询是：

媒体查询范围
```
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);
```
记得在基金会5之前没有“中等”阶级概念 .

感谢this post on Zurb University获取信息 .

编辑：查找这些媒体查询，并在出现的任何地方更改所需的课程 . 当然，如果您运行scss，这会更容易 . 您也可以尝试制作自己的媒体查询，并使用您的属性覆盖您想要的类;你的css必须在基础css之后才能开始工作 .
```
@media only screen and (min-width: 40.063em)

@media only screen and (min-width: 64.063em)

@media only screen and (min-width: 90.063em)

@media only screen and (min-width: 120.063em)
```
回复于 2024-04-28T17:37:09+08:00
2
您可以在_settings.scss中覆盖Foundation 6断点变量，如下所示：
```
$breakpoints: (
  small: 0,
  medium: 768px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);
```
回复于 2024-04-28T17:37:09+08:00

相关问题