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

中型设备的定义：

在 Foundation 中，中型设备指的是屏幕宽度在 40.0625em（约 640 像素）到 64.0624em（约 1024 像素）之间的设备。

中型设备上的网格布局：

在中型设备上，您可以使用 .medium-* 类来定义列的宽度。

示例：

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

在上述示例中：

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

注意事项：

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

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