媒體查詢不起作用（Zurb基金會）

我最近開始使用Zurb基金會，並試圖使用媒體查詢來修改某個.css類，但無法使其工作。以下是（據我所知）.scss文件的相關部分。媒體查詢不起作用（Zurb基金會）

// 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%; 
    } 
}

有誰知道我缺少的是什麼？

由於提前，

碧玉

來源

2015-04-28 Jasper

究竟是什麼工作？如果你檢查你是否看到加載的查詢？ – ajmajmajma

嗨，媒體查詢根本沒有顯示。改變CSS到時它的工作原理，但我想這樣做「的根本出路」： '@media只有屏幕和（最小寬度：64.063em）{ \t .blok { \t \t邊界半徑：10px; \t \t background-color：$ secondary-color; \t \t padding：5px; \t \t身高：100％; \t} }' – Jasper

你之後啓動'grunt build'嗎？ – general03

@media #{small-up} {

需求是

@media #{$small-up} {

至於$小了是你要訪問的是在設置中的變量文件。

來源

2015-04-29 11:28:48 Karl

太容易了......謝謝！複製和粘貼時，$必須消失.. :( – Jasper

媒體查詢不起作用（Zurb基金會）

回答

相關問題