css - 响应式 4 列网格在调整大小时变为 3 列网格

Question

好吧，网格显然很棒。过去两天我一直在看 Foundation , 推特的 Bootstrap , Semantic和 Responsive.gs我仍然想不出一个简单的问题:

I have 4 horizontal sections with an image header and text. 
I want each to take up 25%.

调整屏幕大小时:

I need the rightmost section to disappear
Each remaining section should therefore take up 33%

如果我为 12 列网格放置 .span3 类，那么我必须使用 javascript 将它们更改为 .span4，这不是我想要的。

我看过 symentic 标记(没有在代码中放置魔法类)，但它只是得到 very complicated并且除了 Semantic 之外，大多数框架都不完全支持。

这看起来很简单，但我有点卡住了。

Answer 1

没有任何花哨的框架，这里是一个非常直接的纯 CSS 示例，它采用 4 列并在调整大小时使它们成为 3。

HTML

<div class="container">
    <div class="box">First</div>
    <div class="box">Second</div>
    <div class="box">Third</div>
    <div class="box">Fourth</div>
</div>

CSS

.box
{
    width:22%;
    margin:0px 1.5%;
    background-color:#000;
    color:#fff;
    float:left;
}

@media screen and (max-width:500px)
{
    .box
    {
        width:30%;
    }
    .box:last-child
    {
        display:none;
    }
}

JSFiddle

一个重要的方面是我没有将这些宽度严格设为 25%，因为我希望它们之间有一个边距。在不同的场景和标记中，您可以将宽度设置为 25%，并在其中添加另一个元素，并使用填充在每列之间留出空间。

我个人发现使用框架进行响应式设计更加困难(除非整个页面已经大量使用所述框架)而且我工作过的大多数网站都不会花那么多时间来制定一些自定义规则和声明。

不过我会注意到，媒体查询在大多数现代浏览器上都可用，但是我还没有看到它在没有 JavaScript 帮助的情况下在 IE8 以下版本中工作。不兼容浏览器的此类库之一是 css-mediaqueries-js .