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/[email protected]/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 才开始分栏。
