在CSS中改变Zurb基础网格的断点 [英] Changing Breakpoint for Zurb Foundation Grid in CSS

问题描述

如何通过css而不是sass更改Zurb基础块的断点？

How can I change the breakpoint for Zurb Foundation block via css not SaSS?

例如，在我的代码中，我定义了 large-block -grid-3 和 medium-block-grid-2 ，但它看起来小的方式不是我的喜好，打破不同宽度。

For example, in my code I defined large-block-grid-3 and medium-block-grid-2, but the way it looks on small is not for my liking and I want it to break in different width. I want to be able to declare one column grid, but only for a specific custom width.

推荐答案

在css中，您可以搜索为您要更新的媒体查询的所有引用，并根据需要更改它。 _settings.css中的媒体查询为：

In the css you would search for all references to the media query you want to update and change it as needed. The media queries in _settings.css are:

媒体查询范围

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);

中等的概念。

感谢这个帖子在Zurb大学的信息。

编辑：查找这些媒体查询和更改你想要的类，无处不在出现。这当然是更容易，如果你正在运行scss。你也可以尝试自己的媒体查询，并重写你想要的类与你的属性;你的css必须在基础css后这个工作。

Find these media queries and change the class you want, everywhere it appears. This, of course, is easier if you're running scss. You could also try making your own media query and override the class you want with your attributes; your css must come after the foundation css for this to work.

@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)

这篇关于在CSS中改变Zurb基础网格的断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！