具有固定大小列的響應式網格

Question

我是基礎架構新手，剛開始使用它。我正在使用Foundation Grid創建一個響應式設計。

我創建了具有2x4（行，列）網格的桌面佈局網格。

<div class="row"> 
<div class="large-12 columns"> 
    <div class="row"> 

<div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

    <div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

    <div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

    <div class="large-3 small-6 columns"> 
     <img src="http://placehold.it/250x250&text=Thumbnail" /> 
     <h6 class="panel">Description</h6> 
    </div> 

<!-- End Thumbnails --> 

    </div>  
</div> 

現在，我想是兩個欄佈局平板電腦和移動1個佈局。默認情況下，網格調整列大小以填充空白區域，但我想要固定大小的列。

一個解決方案，我能想到的是基於使用javascript @media查詢更新DOM層次。但我想要一個更好的解決方案，如果可能的話使用CSS。

任何幫助將不勝感激。

Answer 1

如果您使用基金會4.3+，你可以下載一個額外的樣式表使medium grid除了你目前正在使用的小型和大型的。儘管此功能在技術上被列爲實驗性功能，但它將在11月21日發佈Foundation 5時成爲標準。

Answer 2

使用@media和某些屏幕寬度（以像素爲單位），您可以指定最大和最小寬度，以便在div將保持流動性，但不會熄滅屏幕或去比你小的允許。

您需要指定最常見設備的寬度...

例如：

@media screen and (max-width: 980px) { 
    #your id {max-width:99%; min-width:75%;} 
    .image class {width:975px; height:450px;} 
} 
@media screen and (max-width: 650px) { 
    #your id {max-width:99%; min-width:75%;} 
    .image class {width:648px; height:290px;} 
} 
@media screen and (max-width: 480px) { 
    and so on... 
} 
@media screen and (max-width: 320px) { 
    and so on... 
} 
media screen and (max-width: 240px) { 
    and lastly... 
}