foundation断点需同步更新sass变量、js媒体查询对象和xy-grid配置，否则show-for类失效、栅格错乱；修改后必须重新编译css并确保js初始化前覆盖foundation.mediaquery.queries。
Foundation 的断点不能只改 HTML class 或 CSS 文件就生效——必须同步更新 Sass 变量和 JavaScript 内部断点映射，否则 show-for-medium 会失效、cell medium-6 会不响应、自定义断点类压根不触发。
修改 $breakpoints 后必须重新编译 Sass
Foundation v6 把断点定义在 _settings.scss 里，比如默认是：
$breakpoints: ( small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px );
你改了这个变量后，只保存文件没用，必须走完整构建流程重新编译 CSS。否则浏览器加载的还是旧 CSS，断点类（如 medium-6）会按老尺寸计算，导致中屏布局错乱。
- 如果你用的是 CDN 引入的
foundation.min.css，那根本没法改断点——它已编译死，只能换方案 - 用 Webpack/Vite 构建时，确保
@import 'foundation-sites/scss/foundation';前已 import 自定义_settings.scss - 别在
style.css里直接写@media (min-width: 768px)覆盖——这绕过了 Foundation 的断点系统，show/hide类照样不工作
show-for- 类依赖 JS 初始化，且断点值硬编码在 JS 里
Foundation 的显示/隐藏类（如 show-for-small、hide-for-large-up）不是纯 CSS 实现。它们靠 foundation.util.mediaQuery 模块监听窗口变化，并比对 JS 内置的断点对象。
这意味着：
- 没调用
$(document).foundation()，这些类完全无效（即使 CSS 文件里有对应规则） - 你改了 Sass 的
$breakpoints，但没同步改 JS 的Foundation.MediaQuery.queries对象，JS 仍按 640px 判断medium，而你的新断点可能是 720px——结果就是“该显示时不显示” - 官方不提供运行时动态重载断点的 API；要改，得自己 patch
foundation.util.mediaQuery或在初始化前覆盖Foundation.MediaQuery.queries
自定义断点名（如 tablet）需手动注册到 JS
想加个 tablet-6 类？光在 Sass 里加 tablet: 768px 到 $breakpoints 不够：
- CSS 编译后会生成
.cell.tablet-6规则，但 Foundation JS 不认识tablet这个关键字 -
show-for-tablet会被 JS 忽略，因为Foundation.MediaQuery.queries里没有tablet键 - 必须在
$(document).foundation()之前，手动扩展查询对象：Foundation.MediaQuery.queries.tablet = 'screen and (min-width: 768px)';
- 否则就算 HTML 里写了
class="show-for-tablet"，JS 初始化时也找不到匹配项，直接跳过处理
xy-grid 下断点类名和 float-grid 完全不同
Foundation v6 默认用的是老式 float 栅格（row/columns），但如果你启用了 xy-grid（$xy-grid: true），整个类名体系就变了：
-
small-12 medium-6这类写法在 xy-grid 下被忽略，必须用cell small-12 medium-6 -
grid-x容器才启用 flex 行为，grid-container是 float-grid 的遗留容器，混用会导致gap失效、对齐错乱 - xy-grid 的断点缩放逻辑是独立的：它不自动继承
$breakpoints的数值，还要额外设$grid-column-count和$grid-margin才能正确计算每列宽度 - 最易踩的坑：改了
$breakpoints却没关掉 float-grid（$float-grid: false），结果编译出两套栅格 CSS，浏览器按层叠顺序随机生效
真正麻烦的从来不是“怎么加一个断点”，而是 Foundation 把断点拆成了三处：Sass 变量控制 CSS 输出、JS 对象控制媒体查询监听、xy-grid 配置控制列宽计算。漏掉任何一环，页面就会在某个尺寸下突然“失联”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
