Foundation 网格 – 中型设备

Foundation 网格系统在中型设备（Medium Devices）上的行为

Foundation XY Grid 的 medium 断点 默认对应屏幕宽度 ≥ 640px（通常指平板电脑，如 iPad 竖屏或横屏入门级），直到 large 断点（≥ 1024px）前。

• 移动优先原则：如果没有指定 medium-* 类，列会继承 small 的样式（在 small 上往往垂直堆叠）。
• 在 medium 设备上，你可以使用 medium-* 类来覆盖 small 的布局，实现更宽的水平并排、不同列宽、偏移等。
• 默认 gutter（间距）在 medium 上为 30px（small 为 20px），让布局更宽松。

示例代码：在 medium 设备上的典型响应式变化

<div class="grid-x grid-padding-x">
  <div class="cell small-12 medium-6 large-4" style="background: #fee; padding: 20px;">列1</div>
  <div class="cell small-12 medium-6 large-4" style="background: #efe; padding: 20px;">列2</div>
  <div class="cell small-12 medium-12 large-4" style="background: #eef; padding: 20px;">列3</div>
</div>

效果说明：

• 小型设备（<640px）：三列垂直堆叠，全宽。
• 中型设备（≥640px ~ <1024px）：列1 和 列2 水平并排（各 50%），列3 全宽在下一行。
• 大型设备（≥1024px）：三列水平并排（各约 33%）。

这很适合平板：小屏垂直阅读流畅，中屏开始并排显示内容，提高信息密度。

中型设备常用类

• medium-数字：指定列宽（1~12）。
• medium-offset-数字：偏移。
• medium-up-n：块网格，每行 n 个。
• medium-auto / medium-shrink：自动宽度。

如果你想在中型设备上强制特定布局（如三列并排），可以添加 medium-4 等类。如果你有具体的中型设备布局需求（如导航、卡片等），告诉我，我可以提供更精确的代码！