Foundation网格-中型设备

编辑: 点击量: 67
Foundation网格-中型设备


Foundation 网格 - 中型设备

上一章节我们介绍了小型设备上我们使用 .small-* 类来设置,网格比例为 25%/75%:

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

在中型设备上我们推荐的比例为 50%/50%。

提示: 中型设备的屏幕尺寸定义在 40.0625em64.0624em 之间。

中型设备上使用 .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) 。

实例

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

注意: 要保证数列加起来是 12 列! 仅在中型设备上使用以下实例中我们指定了 .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

内容的评论 3


王皓

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

王皓

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

王皓

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

发表评论

提交评论