媒体查询不起作用（Zurb Foundation）

Question

我最近开始使用 Zurb Foundation 并尝试使用媒体查询来修改某个 .css class，但无法使其正常工作。以下是 .scss 文件的（据我所知）相关部分。

// d. 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, 99999999em);

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

// $screen: "only screen";

$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)})";

$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)})";

$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)})";

$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)})";

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

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

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


@media #{small-up} {
    .blok {
        border-radius: 10px;
        background-color: #000000;
        margin: 0 5px 10px;
        padding: 5px;
        height: 100%; 
    }
}

@media #{large-up} {
    .blok {
        border-radius: 10px;
        background-color: $primary-color;
        padding: 5px;
        height: 100%;
    }
}

有人知道我错过了什么吗？

提前致谢，

贾斯珀

Answer 1

@media #{small-up} {

需要

@media #{$small-up} {

因为 $small-up 是您尝试访问的变量，它在设置文件中设置。

媒体查询不起作用（Zurb Foundation）

Media queries not working (Zurb Foundation)

css

media-queries

zurb-foundation