0

我是 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>

基础网格

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

平板电脑网格布局

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

任何帮助将不胜感激。

4

2 回答 2

0

使用@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...
}
于 2013-10-16T22:31:13.477 回答
0

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

于 2013-10-16T22:17:59.857 回答