Foundation 网格 - 大型设备

概述

Foundation 网格是苹果公司开发的一种提供响应式设计解决方案的框架。Foundation 网格通过设置网格容器和网格项目来帮助开发人员设计响应式网页，它支持多种设备类型和适应流览器窗口宽度的能力。

Foundation 网格有三种规模（小型、中型和大型），不同规模的网格可以同时应用于同一网页以便为不同屏幕大小的设备提供更好的适配体验。本文将介绍 Foundation 网格的大型设备使用方法。

Foundation 网格的大型设备网格容器的类名为 row，在设计网页时需要在容器上添加该类名。另外，为了保证网页在大型设备上的适配性，我们还需要通过添加类名 .large 来指定容器的规模为大型。

这样网格容器的类名就应该为 row large。

为了在大型设备上呈现最佳的排版效果，Foundation 网格将页面水平方向上的区域平均分成 12 列。我们需要根据需要将每个网格项目放置到一个或多个此类列中。类名为 large-列数 确定了一个项目跨越的宽度。

例如一个项目需要跨越6个网格列，那么这个项目的类名就应该为 large-6。

注意，你可以将在同一行中的项目组合在一起来共享列，但是它们的类名必须总和为12，因为一个网格容器总共被分为12个列。

在需求中，有时需要在大型屏幕上对网格项目进行偏移或者让项目在容器中央进行排序。

在 Foundation 网格中使用偏移类可以在不改变网格列宽度的情况下向右偏移项目，以帮助实现更好的分层排版效果。

偏移类名 large-offset-列数 取决于你希望将项目移动到右边多少列。

例如项目需要跨越6个网格列，同时也希望它向右移动2个列，那么这个项目的类名就应该为 large-6 large-offset-2。

中央对齐提供了一种在网格项目中使其居中显示的方法，使用这种方法可以使排版效果更美观。

要实现垂直居中对齐，首先需要将子元素的垂直对齐方式设置为居中模式，这可以通过在包含子元素的父容器上添加 .align-middle 类名来实现。

<div class="large-6 align-middle"></div>

接下来，我们需要将此元素的左右外边距设置为 auto。这可以让元素居中停在网格系统的中心位置，具体实现可以分别添加 large-offset-3 和 large-offset-4 类名。

<div class="large-6 align-middle large-offset-3 large-offset-4"></div>

上面的代码可以将它放置在一个12栏的网格容器中并水平居中。

Foundation 网格的大型设备规模为网页设计者在设计大屏幕和桌面设备时提供了一个强有力的工具，它使用简单并易于理解。利用网格容器和网格项目，可以轻松实现响应式设计并在不同屏幕大小和分辨率下达到最佳的排版效果。