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

Question

好的,所以网格显然很棒.过去两天我一直在看基金会,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之外,大多数框架都不完全支持.

这看起来很简单,但我有点卡住了.

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.