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

什么是 Foundation 网格？

Foundation 网格是一种响应式网格系统，可以帮助开发者轻松地构建适应不同设备屏幕大小的网页。网格系统将页面的布局分为若干行和列，并允许将内容放置在这些行和列中。在不同设备上，网格系统会自动调整这些行和列的大小，以适应不同的屏幕尺寸。

中型设备下的 Foundation 网格

中型设备通常指的是平板电脑和桌面电脑。在这些设备上，我们可以使用更大的屏幕显示更多的内容，所以网页的布局也需要相应地进行调整。以下是针对中型设备的一些基本设置。

容器设置

首先，我们需要设置整个网页的容器。在中型设备上，容器的宽度通常应该设置为一个较小的固定宽度，例如 960 像素。这样可以保证内容不会太过分散，同时也不会出现横向滚动条。

htmlCopy Code
<div class="container">
  <!-- 网页内容 -->
</div>

CSS 样式：

cssCopy Code
.container {
  max-width: 960px;
  margin: 0 auto;
}

行与列设置

在 Foundation 网格中，行和列的宽度是通过设置相应的“列数”来实现的。例如，如果一个容器被分为 12 列，则在一个行内可以通过设置每个列占用的列数来实现不同宽度的布局。以下是一个例子：

htmlCopy Code
<div class="row">
  <div class="medium-6 columns">
    <!-- 左侧内容 -->
  </div>
  <div class="medium-6 columns">
    <!-- 右侧内容 -->
  </div>
</div>

CSS 样式：

cssCopy Code
.row::after {
  content: "";
  display: table;
  clear: both;
}
.columns {
  float: left;
  box-sizing: border-box;
  padding: 0 0.9375rem;
}
.medium-6 {
  width: 50%;
}

在上面的例子中，我们将容器分为 12 列，并使用 medium-6 将两个列各自设为 50% 的宽度，从而实现了左右两栏的布局。

实例

以下是一个基于 Foundation 网格的中型设备布局实例：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="medium-8 columns">
      <h1>欢迎来到我们的网站</h1>
      <p>这里是一段简短的介绍文本。</p>
    </div>
    <div class="medium-4 columns">
      <img src="image.jpg" alt="图片">
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <h2>我们的服务</h2>
      <ul>
        <li>服务一</li>
        <li>服务二</li>
        <li>服务三</li>
      </ul>
    </div>
    <div class="medium-6 columns">
      <h2>联系我们</h2>
      <p>电话：123456789</p>
      <p>Email：contact@example.com</p>
    </div>
  </div>
</div>

在中型设备上，这个布局将以两列形式呈现，左侧为一个占据了八个列的大块，右侧为一个占据了四个列的图片。下方的两个块则各自占据了六个列，呈现为平分整个宽度的形式。这个布局可以适应不同的中型设备屏幕大小，并在不同的设备上自动调整大小和排布方式，使得用户可以得到更好的视觉体验。