在 Foundation 框架中，网格系统 是一个响应式布局工具，旨在帮助开发者构建适应不同屏幕尺寸的布局。

小型设备的定义：

在 Foundation 中，小型设备指的是屏幕宽度小于 40.0625em（约 640 像素）的设备。

小型设备上的网格布局：

在小型设备上，列会自动垂直堆叠，占据 100% 的宽度。

要在小型设备上创建网格布局，可以使用 .small-* 类来定义列的宽度。

示例：

<div class="row">
  <div class="small-3 columns" style="background-color:yellow;">
    <p>第一列</p>
  </div>
  <div class="small-9 columns" style="background-color:pink;">
    <p>第二列</p>
  </div>
</div>

在上述示例中：

  • .small-3：表示在小型设备上，列占据 3 列宽度，即 25% 的宽度。
  • .small-9：表示在小型设备上，列占据 9 列宽度，即 75% 的宽度。

注意事项：

  • 在小型设备上，列会自动垂直堆叠，占据 100% 的宽度。
  • 在中型和大型设备上，列会根据定义的类水平排列。
  • 确保每行的列宽度总和不超过 12，以保持布局的正确性。

有关更多信息和示例，请参阅 Foundation 官方文档中的网格部分。 citeturn0search0