Zurb Foundation移动端布局教程

Zurb Foundation 的移动端布局并非依赖手动编写媒体查询，而是通过其移动优先的栅格系统（grid-container + cell）和语义化响应式工具类（如 show-for-small-only、hide-for-large）自动适配不同屏幕——但这一“自动化”背后有关键前提：必须正确引入 CSS/JS 文件、在 DOM 加载后执行 $(document).foundation() 初始化，并深入理解其断点逻辑（small≤640px、medium≥641px、large≥1024px）；稍有疏忽，如 JS 未加载、类名混用、断点强行覆盖或忽略初始化，就会导致 off-canvas 失效、菜单不展开、布局错乱等典型问题，让看似简洁的响应式开发瞬间陷入调试泥潭。

Zurb Foundation 的移动端布局不是靠单独写 media query 实现的，而是依赖其栅格系统（grid）和响应式工具类（如 show-for-small-only）自动适配——但前提是正确引入、初始化，并理解它的断点逻辑。

确认 Foundation 版本与 CSS 引入方式

Foundation 6+ 已弃用全局 foundation.css 预编译文件，推荐用 Sass 按需导入，或使用官方 CDN 提供的完整 CSS。若直接引用 CDN，必须确保加载顺序：先 foundation.min.css，再 foundation.min.js（否则 JS 组件如 off-canvas 会失效）。

常见错误现象：off-canvas 点击无反应、dropdown 不展开、menu-icon 不显示 —— 多半是 JS 未加载或未执行 $(document).foundation()。

• CDN 地址示例（Foundation 6.7+）：https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css
• 必须在 底部或 DOM 加载后执行：$(document).foundation();
• 若用 webpack/Vite，避免重复 import CSS；Sass 用户应通过 @include foundation-grid 显式启用栅格

用 grid-container + cell 替代传统 float 布局

Foundation 6 的栅格默认为移动优先：所有 cell 在小屏下垂直堆叠，加尺寸前缀才改变行为。不需要写 @media (max-width: ...) 就能实现「小屏单列 → 平板双列 → 桌面三列」。

关键点：不写任何类时，cell 默认占满整行；加 small-12 medium-6 large-4 才开始分栏。

<div class="grid-container">
  <div class="grid-x">
    <div class="cell small-12 medium-6 large-4">左侧</div>
    <div class="cell small-12 medium-6 large-4">中间</div>
    <div class="cell small-12 large-4">右侧（大屏才占 4 列）</div>
  </div>
</div>

• small- 对应 ≤640px（手机竖屏），medium- 对应 ≥641px（平板/小桌面），large- 对应 ≥1024px
• 同一元素可叠加多个尺寸类，Foundation 会按断点覆盖；未声明的断点沿用上一级规则
• 避免混用旧版 small-6 medium-4 和新版 grid-x，会导致 margin/collapse 行为异常

隐藏/显示内容要用 show-for- / hide-for- 类

Foundation 提供语义化响应类，比手写 display: none 更可靠，且支持打印媒体查询（如 show-for-print）。

注意：show-for-small-only 仅在小屏显示，show-for-medium 及以上都显示（含 large），而 show-for-small 是「小屏及以上」——命名逻辑容易反直觉。

• 常用组合：show-for-small-only（仅手机）、hide-for-large（大屏隐藏）、show-for-sr（屏幕阅读器可见，视觉隐藏）
• 这些类本质是 display: block/none !important，无法被普通 CSS 覆盖，调试时检查是否被其他 !important 冲突
• 不要对 Flex 容器子元素滥用这些类——可能破坏 flex 排列，优先用栅格控制显隐

自定义断点需改 Sass 变量，纯 CSS 项目无法动态调整

Foundation 的断点值（$breakpoints）硬编码在 Sass 中，若你用的是 CDN 或预编译 CSS，就无法修改 medium 的起始宽度。强行覆盖 CSS 类（如重写 .medium-6）会导致栅格计算错乱。

真正需要定制断点时，唯一可靠方式是：用 Sass 重定义 $breakpoints 后重新编译 CSS。

• 例如把 medium 断点从 641px 改成 768px：$breakpoints: (small: 0, medium: 768px, large: 1024px);
• 纯 HTML/CSS 项目想临时适配 iPad Pro，建议用原生 @media (min-width: 768px) 补充样式，而非试图 hack Foundation 类
• Foundation 6.7+ 新增 xxlarge 断点，但需显式开启：$grid-breakpoints: map-merge(...)

Foundation 的响应式不是“开箱即用”的魔法，它把断点、栅格、工具类耦合在一套设计语言里——一旦跳过初始化、误用类名或强行覆盖 CSS，移动端表现就会断裂。最常被忽略的是 JS 初始化和断点继承逻辑，而不是写错某一行 HTML。

本篇关于《Zurb Foundation移动端布局教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！