响应性CSS保证金

Question

目标是实现这一目标：

1）黑框表示div（#black_box）。

2）宽度为1000像素时，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
}