在CSS中更改Zurb Foundation Grid的斷點

Question

如何通過css而不是SaSS更改Zurb Foundation塊的斷點？

例如，在我的代碼中，我定義了large-block-grid-3和medium-block-grid-2，但它看起來很小的方式並不符合我的喜好，我希望它以不同的寬度分解。我希望能夠聲明一個列網格，但僅限於特定的自定義寬度。

Answer 1

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

Answer 2

您可以覆蓋基金6個斷點變量一樣_settings.scss如下：

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