Foundation v6响应式栅格需同时加载CSS、JS及viewport标签，且JS必须初始化；仅引CSS会导致小屏不堆叠，未调用$(document).foundation()则show/hide类失效，自定义断点须同步Sass与JS。
Foundation 框架本身已停止主版本更新（v6.7 是最后一个大版本），官方推荐迁移到 Foundation for Sites 的维护模式或转向其他现代方案；但若你正维护旧项目、或明确需用 Foundation v6 实现响应式布局，关键不是“怎么引入”，而是“怎么避开默认陷阱、让栅格真能响应”。
如何正确引入 Foundation v6 并启用响应式栅格
Foundation 的响应式能力依赖于完整的 CSS + JavaScript 加载链，缺一不可。仅引入 foundation.min.css 会导致 .row 和 .columns 在小屏下不自动堆叠——因为断点媒体查询和 JS 驱动的增强行为（如 equalizer）被跳过。
- 必须同时加载
foundation.min.css和foundation.min.js（且jQuery要在它之前） -
meta viewport标签不可省： - 不要手动覆盖
$breakpointsSass 变量后只编译 CSS——JS 内部仍按默认断点计算，会导致show-for-medium类失效
为什么 .columns 在手机上没占满一行？
Foundation 默认栅格是“移动优先但非强制堆叠”：.columns 在最小断点（small）下宽度为 auto，仅当显式指定 small-12 才占满。这不是 bug，是设计选择——方便开发者控制小屏下的紧凑排版（比如并排两个按钮）。
- 要让列在所有尺寸下都独占一行，写
class="columns small-12" - 若想“小屏堆叠、中屏并排”，用
class="columns small-12 medium-6" - 漏写
small-X时，浏览器按 CSS 顺序 fallback 到最近的更大数据断点（如只写medium-6，则small下宽度由浏览器默认流式行为决定，通常不是 100%）
如何用 show/hide 类精准控制元素显示状态？
show-for-small 这类类名容易误解：“small” 指的是 Foundation 定义的 small 断点范围（0–639px），而非“小屏幕设备”。它的显示逻辑是“仅在此断点激活时显示”，不是“在小设备上显示”。
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
立即学习“前端免费学习笔记（深入）”；
-
show-for-small：仅在small断点生效（即 0–639px），中大屏隐藏 -
show-for-medium-up：从medium（640px）起一直显示，含 large、xlarge - 注意
hide-for-xlarge-only这种“only”后缀类——它只在 xlarge 断点（1440px+）隐藏，其余全部显示，不是“仅在 xlarge 隐藏” - 这些类依赖 Foundation JS 初始化，未调用
$(document).foundation()时无效
自定义断点后，JavaScript 组件为何失灵？
Foundation v6 的 JS 组件（如 Dropdown、Off-canvas）内部硬编码读取 Foundation.MediaQuery.current，而该值来自 CSS 中的 @media 查询匹配结果。如果你用 Sass 覆盖了 $breakpoints 却没同步更新 foundation.scss 引入顺序，或 JS 加载早于 CSS，current 就会始终返回 undefined 或错误断点名。
- 确保自定义断点在
@import 'foundation/scss/foundation';之前声明 - 检查浏览器控制台是否报错
MediaQuery: Could not determine current breakpoint - 避免在 CSS 中用
!important覆盖foundation.css的媒体查询，这会破坏 JS 的 matchMedia 监听
Foundation 的响应式不是开箱即用的魔法，它把断点逻辑拆到了 CSS、JS、HTML 三层，任何一层脱节都会导致“看起来写了响应式，实际不响应”。最常被忽略的是 JS 初始化时机和断点变量的跨层一致性——这两处出问题，连最基础的 small-12 都可能失效。
