1
Sassミックスインの使用をよりよく理解するために、私はメディアクエリブレークポイント用にそれらを使用することを学び、37.5emの下にそれらを処理しているようです。あなたは、私は以下の投稿したSCSSコードを見るのであれば、それはなくlaptopやdesktopため、（ビューポートウィンドウ上37.5em上）とphablet（ビューポートウィンドウ上37.5emの下）mobileonlyのスタイルをレンダリングします。ビューポートウィンドウが大きく伸びると、私が宣言したの16進変数を超えて変更されません。 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;
}
}
EDIT：追加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;
}
}
これは間違いなく機能しました。どうもありがとう。何らかの理由で、私は 'min-width'がビューポートウィンドウで新しい幅に達したときにオーバーライドすると考えました。 – newman