相关疑难解决方法(0)

使用Sass变量和CSS3媒体查询

我正在尝试将Sass变量的使用与@media查询结合使用,如下所示:

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}
Run Code Online (Sandbox Code Playgroud)

$base_width 然后在基于样式表宽度百分比的测量中的各个点处定义,以产生流体布局.

当我这样做时,变量似乎被正确识别,但媒体查询的条件不是.例如,无论屏幕宽度如何,上面的代码都会产生1160px的布局.如果我像这样触发@media语句:

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}
Run Code Online (Sandbox Code Playgroud)

无论屏幕宽度如何,它都会产生960px的布局.另请注意,如果我删除它的第一行,$base_width: 1160px;则返回未定义变量的错误.我缺少什么想法?

sass media-queries

94
推荐指数
6
解决办法
7万
查看次数

标签 统计

media-queries ×1

sass ×1