Sass @mixin斷點只處理手機/平板電腦風格

爲了更好地理解Sass mixins的使用，我試圖學習如何將它們用於我的媒體查詢斷點，並且它似乎只是在37.5em之上和之下處理它們。所以，如果你看我已經貼在下面的SCSS代碼，它將呈現樣式mobileonly（下面37.5em視窗口）和phablet（以上37.5em視窗口），但不適用於laptop或desktop 。當視口窗口拉大時，它不會超過我聲明的我的十六進制變量。根據Chrome開發工具，媒體查詢似乎正在工作，但@media (min-width: 37.5em)似乎覆蓋樣式仍然是因爲我想要的樣式在開發工具中被刪除。因此，即使在全視口窗口大小下，@media (min-width: 37.5em)也是唯一應用的樣式。爲什麼會這樣？Sass @mixin斷點只處理手機/平板電腦風格

Here是我的確切問題jsfiddle。

而且，對於進一步澄清，這裏是我的代碼：

HTML：

<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="css/build/main.css"> 
    </head> 
<body> 
    <header> 
    </header> 
</body> 
</html>

SCSS：

$azure: #f3f4f4; 
$chateau-green: #2bb656; 
$firefly: #364141; 
$fern: #59cb59; 
$pastel-green: #75dd66; 
$pigment-green: #0ca750; 

@mixin breakpoint($point) { 
    @if $point == desktop { 
    @media (min-width: 70em) { @content ; } 
} 
    @else if $point == laptop { 
    @media (min-width: 64em) { @content ; } 
} 
    @else if $point == tablet { 
    @media (min-width: 50em) { @content ; } 
} 
    @else if $point == phablet { 
    @media (min-width: 37.5em) { @content ; } 
} 
@else if $point == mobileonly { 
    @media (max-width: 37.5em) { @content ; } 

} 
} 

header { 
    height: 600px; 
    width:100%; 
    @include breakpoint(desktop) { 
    background-color:$azure; 
    } 
    @include breakpoint(laptop) { 
    background-color:$chateau-green; 
    } 
    @include breakpoint(phablet) { 
    background-color:$firefly; 
    } 
    @include breakpoint(mobileonly) { 
     background-color:$pastel-green; 
    } 
}

編輯：新增Outputed CSS：

header { 
    height: 600px; 
    width: 100%; 
} 
@media (min-width: 70em) { 
    header { 
    background-color: #f3f4f4; 
    } 
} 
@media (min-width: 64em) { 
    header { 
    background-color: #2bb656; 
    } 
} 
@media (min-width: 37.5em) { 
    header { 
    background-color: #364141; 
    } 
} 
@media (max-width: 37.5em) { 
    header { 
    background-color: #75dd66; 
    } 
}

來源

2017-08-22 newman

的這裏的問題是風格w ritten代替min-width: 37.5em將覆蓋爲min-width: 64em編寫的樣式，對於其他情況也是如此。爲此，請嘗試設置min-width以及max-width兩者，以便樣式具體。

Here是js小提琴。

來源

2017-08-22 04:26:27 kmg

這絕對有效。非常感謝。出於某種原因，我認爲'min-width'會在視口窗口達到新寬度時被覆蓋。 – newman

Sass @mixin斷點只處理手機/平板電腦風格

回答

相關問題