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断点只处理手机/平板电脑风格

回答

相关问题