Foundation 网格 - 中型设备 - 学习 Foundation 5

中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间，在中型设备上我们推荐的比例为 50% / 50%

中型设备上使用 .medium-* 类来创建网格

比如要创建两列

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

上面的代码创建了两个列，比例为 25% 和 75%

注意： Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码

在小型设备上使用的比例为 25% / 75% (.small-3 和 .small-9 )

但在中型设备上推荐使用的比例为 50% / 50% (.medium-6 和 .medium-6)

注意: 要保证数列加起来是 12 列

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

运行范例 »

仅在中型设备上使用

如果只指定了 .medium-6类 ( 不是.small-* )，则说明在中型或大型设备上比例为 50%/50%

但在小型设备上会水平堆叠 ( 100% 宽度)

<div class="row">
    <div class="medium-6 columns" style="background-color:yellow;">
        <p>简单教程</p>
    </div>
    <div class="medium-6 columns" style="background-color:pink;">
        <p>简单教程</p>
    </div>
</div>

运行范例 »