Question

我在我的设置中使用这些

$small-range: (0em, 31em); /* 0, 640px */
$medium-range: (31.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em); /* 1921px */

正确编译所有其他设置。上面的那些被忽略了

Answer 1

在app.scss文件中，将导入顺序更改为：

@import "foundation/settings"; 
@import "foundation";

确保所有路径都正确。

您现在可以根据需要选择范围。

Answer 2

您必须取消注释其他一些变量才能更改媒体查询。

在变量下找到并取消注释：

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

$small: $small-up;
$medium: $medium-up;
$large: $large-up;

Answer 3

还需要在_settings.scss文件中取消注释：@import“foundation / functions”;

来源：http://foundation.zurb.com/forum/posts/891-media-query-ranges-doesnt-take-effect

在基础5中，当我更改设置中的范围时，它不起作用

3 个答案: