Foundation 网格 - 小型设备学习笔记

什么是Foundation网格？

Foundation是一款响应式前端框架，其网格系统被广泛用于创建适应不同屏幕大小的网站和应用程序。Foundation网格系统是通过将页面分成12列来实现布局的，可以在每个屏幕尺寸下选择要使用的列数。

如何使用Foundation网格？

基本语法

Foundation网格系统由.row和.column两个类组成，.row将一组.column包含在内，而.column表示每列的大小。以下是基本的HTML结构：

htmlCopy Code
<div class="row">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

上面的代码将创建一个带有3个列的行。默认情况下，每列都占据相等的宽度，因此在这种情况下，每列将占据父元素（.row）的1/3宽度。

列数的选择

Foundation网格系统支持1-12列。要更改列数，请使用以下类之一：

• .small-: 用于小屏幕设备（移动设备等）
• .medium-: 用于中等屏幕设备（平板电脑等）
• .large-: 用于大屏幕设备（台式机电脑等）

例如，要在小屏幕设备上使用2列，中等屏幕设备上使用4列，大屏幕设备上使用6列，请使用以下代码：

htmlCopy Code
<div class="row">
  <div class="small-6 medium-4 large-6 column">Column 1</div>
  <div class="small-6 medium-8 large-6 column">Column 2</div>
</div>

偏移和填充

Foundation网格系统还支持偏移和填充列。要在列之间添加填充，请使用.column和.columns类之间的间距，例如：

htmlCopy Code
<div class="row">
  <div class="column">Column 1</div>
  <div class="columns small-offset-1">Column 2 with 1 column offset</div>
</div>

要对列进行偏移，请使用以下类之一：

• .small-offset-
• .medium-offset-
• .large-offset-

例如，要将第一个列移动1个列大小，可以使用以下代码：

htmlCopy Code
<div class="row">
  <div class="small-6 medium-4 large-6 column">Column 1</div>
  <div class="small-6 medium-8 large-6 column small-offset-6 medium-offset-4 large-offset-6">Column 2</div>
</div>

Foundation网格的实例

以下是一个示例，演示如何使用Foundation网格系统来创建响应式布局：

htmlCopy Code
<div class="row">
  <div class="small-12 medium-4 column">
    <h2>Column 1</h2>
    <p>Some content here...</p>
  </div>
  <div class="small-12 medium-8 column">
    <h2>Column 2</h2>
    <p>Some content here...</p>
  </div>
</div>

上面的代码将创建一个在小屏幕设备上占据整个屏幕宽度的列，而在中等屏幕设备上占据1/3宽度的第一个列，以及占据2/3宽度的第二个列。