jquery - 响应式 CSS 边距

Question

目标是实现这个:

1) 黑框代表一个div (#black_box)。

2) 在宽度为 1000px 时，div 具有负边距并被视口(viewport)裁剪。

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%; }

现在随着视口(viewport)尺寸的增加:

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

我知道有一种使用 jQuery 测试视口(viewport)宽度的简单方法，但是您可以指定一个范围吗？喜欢 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
}