Foundation网格 - 中型设备

Foundation网格是一个基于栅格系统的响应式网页设计框架，为开发者提供了一种简单易用的方式，来创建适配不同分辨率的布局。其中，网格系统是框架中最重要的组件之一，它可以自动计算每个元素在不同屏幕尺寸下的宽度，从而实现页面的自适应。

基本概念

在Foundation网格系统中，分辨率主要分为小型、中型、大型三个档次。而每个档次中的网格又被分为12个单位，每个单位的宽度都相等，可以根据实际需要进行组合来实现布局。在中型设备中，网格布局一般在屏幕宽度介于640px到1024px之间使用。

栅格系统

在Foundation网格系统中，网格组件主要由container、row、column三部分组成。

container

container是一个用来包含row的元素。它的作用是限制网格的宽度，从而保证布局的稳定性。一般情况下，我们可以通过设置左右边距（margin）为auto来使container在页面居中显示。

row

row是一个用来包含column的元素。其主要作用是为网格组提供一个相对的定位，以便于正确的布局。container中可以包含多个row，每个row之间可以设置一定的间隔（gutter），以进一步优化网格布局。

column

column是一个元素的基础单元，用来定义具体内容的位置和大小。Foundation网格系统支持多种单元格的宽度比例，分别为1/12、2/12、3/12、4/12、5/12、6/12、7/12、8/12、9/12、10/12、11/12和12/12。其中，12/12可以占据整行的宽度，即100%，而1/12则为最小宽度比例，用于实现比较细的元素。

布局实例

下面是一个实例，使用Foundation网格系统进行网页布局。

<div class="container">
    <div class="row">
        <div class="column medium-6 small-12">
            <p>This is column1.</p>
        </div>
        <div class="column medium-6 small-12">
            <p>This is column2.</p>
        </div>
    </div>
</div>

上述实例中，container用来约束网格的宽度，row用来定位网格的位置，column则是具体元素的基础单元。在这里，我们设置了两个占据6/12的列，相当于1/2的宽度。而由于medium屏幕下使用的是6/12，因此在640px到1024px的屏幕中，这两列元素的宽度都为50%。在小型设备中，由于使用的是small-12，因此两个元素都会占据整行，即各占据100%的宽度。

总结

Foundation网格系统是一个非常实用的响应式网页设计框架，它能够帮助开发者快速地构建自适应布局，从而提高用户体验。在中型设备中，网格布局的设计十分重要，需要根据实际需要灵活运用各种元素，以实现最佳的效果。