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标签不可省：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要手动覆盖
$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），而非“小屏幕设备”。它的显示逻辑是“仅在此断点激活时显示”，不是“在小设备上显示”。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
-
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 都可能失效。
