响应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
}