2

好的，所以网格显然很棒。在过去的两天里，我一直在研究Foundation、Twitter 的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%

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

我已经查看了 symentic 标记（没有在代码中放置魔术类），但这变得非常复杂，并且除了 Semantic 之外的大多数框架都没有完全支持。

这似乎是一件很简单的事情，但我有点卡住了。

4

1 回答 1

5

没有任何花哨的框架，这是一个非常简单的纯 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。

于 2013-05-04T05:13:49.643 回答