jquery - レスポンシブ CSS マージン

Question

目標はこれを達成することです:

1) 黒いボックスは div (#black_box) を表します。

2) 1000px の幅で、div には負のマージンがあり、ビューポートによってクリップされます。

3) 別の幅 2000px では、負のマージンが正のマージンに置き換えられます。

4) これまでのところ、html/css は次のようになっています。

<section>
    <div id="content">
        [SOME STUFF]
        <div id="black_box">
            [SOME STUFF]
        </div>
    </div>
</section>

section { margin: 0; padding: 5%; }
#black_box { margin-left: -5%; padding: 5% 5% 5% 10%; }

ビューポートのサイズが大きくなりました:

section { margin-left: 10%; padding: 5%; }
#black_box { margin: 0; padding: 5%; }

jQuery でビューポート幅をテストする簡単な方法があることは知っていますが、範囲を指定できますか? viewport = 300px-1000px のようにこれを行うか、そうでなければ viewport = 1001px+ を行いますか? ありがとう。

Answer 1

CSSでメディアクエリを使用できます

@media only screen and (max-width: 2000px) {
    your css for width 2000
}

@media only screen and (max-width: 1000px) {
        your css for width 1000
}