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