0

モバイル ファーストのアプローチを使用して、CSS3 メディア クエリを使用してページを開発しています。

しかし今、私は問題に直面しています:可視性クラスの「スタイルブリーディング」に対処するにはどうすればよいですか?
私の最初のメディア クエリが次のようになったときの意味を説明しましょう。

@media only screen and (min-width: 20em) {
    // Styles here
}

これらのスタイルは、20em より小さい画面には適用されません。メディア クエリにラップされていないスタイルは基本的に最初のメディア クエリであるため、これは実際には問題ありません (私の言いたいことが理解できることを願っています)。

しかしここで、特定の画面サイズの要素を非表示にするための可視性クラスを導入したいと考えています。問題は、これらのスタイルが基本的に継承されることです。見る： 

@media only screen and (min-width: 20em) {
    .hidden-first {
        display: none;
    }
}

hidden-first画面の幅が 20em 以上になるとすぐに、このクラスを持つ要素は非表示になります。しかし、メディア クエリがアクティブである限り、要素を非表示にしたいだけです。

どうすればいいですか? 別のメディアクエリ内でスタイルをリセットする方法はありますか?

4

1 に答える 1

0

hide-for-mediumのようなクラスを作成し、そのルールを作成することをお勧めしますdisplay:none !important;

Foundationフレームワークを見て、それがどのように行われるかを確認してください。この状況に対処する最善の方法だと思います。

于 2013-11-10T02:25:18.743 に答える