Foundation 5中修改medium媒体查询断点后未生效，求解决方案

作为Foundation 5的过来人，我完全理解你改断点却没生效的挫败感——这个框架的断点配置确实有几个容易遗漏的地方，你改了_settings.scss里的ranges是第一步，但还有这些地方需要检查：

• 更新对应的断点变量：Foundation 5除了$*-range变量，还有单独的断点阈值变量，比如默认的$breakpoint-medium: 45em;。你需要在_settings.scss里找到这个变量，把它改成48em。很多组件和默认媒体查询都是直接调用这个变量，而非从range中计算，这大概率是你配置没生效的核心原因。
• 检查自定义SCSS中的硬编码值：遍历你自己编写的所有.scss文件，查找是否有直接写@media screen and (min-width: 45em)或者720px（45em对应的像素值）的地方，把这些都替换成48em或者768px。更推荐的做法是统一用$breakpoint-medium变量引用，方便后续维护。
• 梳理Foundation JS组件的断点依赖：不少Foundation 5的JS组件（比如响应式菜单、顶栏、模态框）会在JS中判断屏幕宽度来触发交互行为。你需要搜索项目内的.js文件，找到45em或者720这类数值，替换为48em或者768。比如在foundation.topbar.js里就可能存在判断屏幕是否达到medium断点的逻辑，这些地方必须同步修改。
• 确认编译流程完全生效：如果你用Grunt/Gulp这类构建工具，确保重新运行了完整的编译任务，而非仅编译单个文件。可以手动删除生成的CSS文件后重新编译，验证新CSS中是否已无45em的痕迹。
• 彻底清除缓存：除了浏览器缓存，还要检查服务器端的静态文件缓存（比如Nginx/Apache的缓存规则、CDN缓存）。可以在浏览器开发者工具的「网络」tab中勾选「禁用缓存」，重新加载页面确认是否加载了最新的CSS文件。

• 统一使用框架变量：在自定义代码里，尽量用Foundation提供的变量（比如$breakpoint-medium、$medium-up这类媒体查询混合宏），不要硬编码数值。这样以后再调整断点，只需修改_settings.scss里的变量即可，无需到处查找硬编码内容。
• 分模块验证：修改配置后，先只保留Foundation基础样式测试断点是否生效，再逐步加回自定义样式，这样能快速定位是否是自定义代码中的硬编码导致的问题。
• 利用开发者工具排查：用浏览器元素检查器查看页面的媒体查询规则，找到仍显示45em的规则，通过对应的CSS文件名和行号回溯到SCSS源文件修改。

内容的提问来源于stack exchange，提问作者Craig