2013-05-04 97 views
2

好的,所以網格顯然很好。我花了近兩天看Foundation,Twitter的BootstrapSemanticResponsive.gs,我仍然無法找出一個簡單的問題:響應4列網格變成3列網格調整大小

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 markup(不是把魔法類放在代碼中),但它只是得到very complicated,除了Semantic之外,大多數框架都沒有完全支持它。

這似乎是這樣一個簡單的事情,但我有點卡住了。

+1

對於這個我認爲你讓你自己的'代碼'和'媒體查詢'安排根據你想要的。 – 2013-05-04 04:41:35

回答

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

+1

我也是這麼說的+1沒有任何花哨的框架,這裏是一個非常直接的例子。 :-) – 2013-05-04 05:18:47

+0

我絕對記得過去兩天我爲什麼不喜歡框架。但需要看看那裏有什麼。我很滿意Old-IE JS修復程序 – 2013-05-04 05:20:33

+1

@Simon_Weaver在需要時使用框架,但知道爲什麼使用它們。 – 2013-05-04 05:22:22