Question

我正在尝试在Chrome和Firefox中测试以下代码，但两者都没有提起它。我已将它添加到我的样式表的末尾，无论如何都可以正常工作。

@media all and (max-width : 850px) {
  h1#site-name {
    width: 100%;
    a {
      margin: auto;  
    }
  }

  nav#main-menu {
    float: left;
  }
}

我正在重新调整浏览器窗口的大小，并且更改显然没有在任何宽度生效。代码在.scss文件中以供参考。

有什么想法吗？

Answer 1

您也可以在scss中使用mixins进行媒体查询。

@mixin mq($mq) {
    @if $mq == medium {
        @media (max-width: 850px) { @content; }
    }
}

#main-menu {
    // default styles

    // media query 850px max-width
    @include mq(medium) {
        float: left;
    }
}

查看此文章了解更多信息.. http://css-tricks.com/media-queries-sass-3-2-and-codekit/

SCSS的媒体查询未应用

1 个答案: