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

【问题标题】：Responsive Grid with fixed size columns具有固定大小列的响应式网格
【发布时间】：2013-10-17 06:31:13
【问题描述】：

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

现在，我想要的是平板电脑的两列布局和移动设备的一列布局。默认情况下，网格会调整列的大小以填充空白空间，但我想要固定大小的列。

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

我们将不胜感激。

【问题讨论】：

针对这些布局转换，引入了@media queries。我认为媒体查询最适合您的情况。

标签： javascript css grid responsive-design zurb-foundation

【解决方案1】：

如果您使用的是 Foundation 4.3+，除了您当前使用的小型和大型样式表之外，您还可以下载一个启用 medium grid 的附加样式表。虽然此功能在技术上被列为实验性功能，但它将在 11 月 21 日发布的 Foundation 5 中成为标准。

【讨论】：

【解决方案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...
}

【讨论】：