响应式 CSS 边距答案

【问题标题】：Responsive CSS margin响应式 CSS 边距
【发布时间】：2012-07-19 10:08:37
【问题描述】：

我们的目标是实现这一目标：

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+ 这样做？谢谢。

【问题讨论】：

你追求的是纯 js 解决方案吗？因为否则你可以使用 max-width 和 min-width 媒体查询。
CSS 解决方案非常好。我只是假设 CSS 无法处理它，或者 CSS 解决方案不会是那么好的跨浏览器。但是，如果您有唯一的 CSS 方法，请告诉我，我会检查一下。

标签： jquery css media-queries

【解决方案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
}

【讨论】：

哇，谈谈严重的脱节。我已经在一些 iPhone/iPad CSS 中使用了它，我什至没有想到我也可以在这里使用它。我想现在为时已晚。我会试一试，看看我想出了什么。谢谢。
您也可以组合最小和最大媒体查询，例如@media only screen and (min-width: 600px) and (max-width: 1000px)