0

Chrome と Firefox で次のコードをテストしようとしていますが、どちらもそれを拾っていません。とにかくうまく動作するスタイルシートの最後に追加しました。

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

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

ブラウザ ウィンドウのサイズを変更していますが、明らかにどの幅でも変更が反映されていません。コードは参照用の .scss ファイル内にあります。

何か案は？

4

1 に答える 1

1

scss のメディアクエリにも mixin を使用できます。

@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/

于 2012-12-13T09:40:46.523 に答える