0

ビューポートが 960px 未満の場合、絶対配置された div をビューポートから非表示にしたいと考えています。非表示のルールを使用した div およびメディア クエリの css は次のとおりです。

@media all and (max-width: 960px) {
    .newsbox{
        right:-355px;
    }

}  

.newsbox{
    position:fixed;
    right:0;
    top:0;
    height:100%;
    background:#fff;
    z-index:900;
    width:395px;
    overflow:hidden;
    background:#f7f7f7;
}

ブラウザ ウィンドウの幅が 960px よりも広くない場合に、このルールがこの要素を非表示にしない理由を誰か説明できますか? 前もって感謝します！

4

1 に答える 1

1

ルール@mediaは下に配置する必要があります。そうしないと、カスケードにより、メディア クエリが有効かどうかに関係なく、外側の.newsboxルールが常に優先rightされ、内側のルールのスタイルが上書きされます。.newsbox

.newsbox {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
    z-index: 900;
    width: 395px;
    overflow: hidden;
    background: #f7f7f7;
}

@media all and (max-width: 960px) {
    .newsbox {
        right: -355px;
    }
}
于 2012-09-22T21:45:50.867 に答える