14

私はこのhtmlとcssコードを持っています:

<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
</div>

@media all and (max-width: 400px), (max-height: 300px) {
    .wrapper .a {
        ....
        ....
    }
    wrapper. .b {
        ....
        ....
    }
    ....
    ....
}

ここで、ラッパーが「like-small」クラスを取得するたびに、画面が小さくなくても、小さな画面のすべてのスタイルが適用されるようにしたいと考えています。メディア クエリ内で CSS コードを複製したくありません。どうすれば解決できますか？

もう 1 つの解決策は、強制的にメディア クエリを適用することです。それを行う方法はありますか？

4

5 に答える 5

1

少しのJavaScriptでこのようなことができます。

簡単に言うと、メディア クエリを CSS から移動し、.js を使用して JS でテストしますwindow.matchMedia。

どれが一致したかがわかったら、<html>Modernizr の動作と同様に、className をタグに追加できます。だからあなたが見るだろう電話で<html class="like-small">。

CSS は、ネイティブ メディア クエリを使用するのではなく、これらの便利なクラスを利用するように記述されます。

.like-small wrapper.a {}
.like-large wrapper.a {}

<html>( CSS をさらに簡素化するために、.not-like-small、.not-like-medium クラスも同様に追加するのが好きです)

これで、通常のメディア クエリが照合され、適切なクラス名がドキュメントに追加された後、RWD はほぼ通常どおりに機能します。また、特定のスタイルを強制したい場合は、HTML タグの classNames を書き直してページ全体に適用するか、任意の親要素に className を追加してページの一部のみに適用することができます。

于 2014-10-23T14:48:23.780 に答える
0

新しいバージョンの Chromeでは、モバイル デバイスを「エミュレート」して、デスクトップ ブラウザでメディア クエリをトリガー/テストできます。(Internet Exploder 11も同じ動作をします! ) エミュレーションを適用した後、ブラウザを更新する必要がある場合があります。Chrome 35 は、関連するタブで更新を押すまで、メディア クエリを部分的に適用します。

于 2014-07-15T14:10:27.247 に答える
-3

それらのセクションに同じクラスを追加します。

<div class="wrapper">
    <div class="makeMeShine a"></div>
    <div class="makeMeShine b"></div>
</div>

a と b は独自のカスタム スタイルを持つことができます :)

于 2013-03-27T09:41:58.787 に答える