具有固定大小列的响应式网格

Question

我是Foundation Framework的新手，刚刚开始使用它。我正在使用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>

现在，我想要的是Tablet的两列布局，以及Mobile的一列布局。默认情况下，网格会调整列的大小以填充空白区域，但我需要固定大小的列。

我能想到的一个解决方案是使用javascript基于@media查询更新DOM层次结构。但是如果可能的话，我想要一个更好的解决方案。

任何帮助将不胜感激。

Answer 1

如果您使用的是Foundation 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...
}