Zurb Foundation移动端布局依赖栅格系统和响应式工具类自动适配，需正确引入CSS/JS、执行$(document).foundation()初始化，并理解其移动优先断点逻辑（small≤640px、medium≥641px、large≥1024px）。
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 才开始分栏。
左侧中间右侧（大屏才占 4 列）
-
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。
