Changing Breakpoint for Zurb Foundation Grid in CSS

问题

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

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.

回答1:

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:

Media Query Ranges

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

Remember before Foundation 5 there wasn't a "medium" class concept.

Thanks to this post on Zurb University for the information.

EDIT: 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)

回答2:

You can override Foundation 6 breakpoints variable in _settings.scss like the following:

$breakpoints: (
  small: 0,
  medium: 768px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

来源：https://stackoverflow.com/questions/31495501/changing-breakpoint-for-zurb-foundation-grid-in-css

标签

css

zurb-foundation