Foundation的grid用法和常见断点失效问题
Foundation默认的grid-row和grid-column类在现代项目里容易和CSS Grid原生属性冲突，尤其当你同时写了display: grid又套用grid-container时，布局会“看起来没反应”。这不是你写错了，是Foundation 6+默认用的是浮点+媒体查询的老式栅格，不是CSS Grid实现。
- 用
grid-container必须配grid-x（水平）或grid-y（垂直），单独加cell不生效 - 断点类如
small-12 medium-6 large-4只对cell子元素起作用，父容器必须是grid-x - 如果用了
flexbox-grid（旧版可选模式），需确认_settings.scss里$flexbox-grid设为true，否则编译后压根没这些类 - 自定义断点要改
$breakpoints变量后重新编译Sass，直接在HTML里写xxlarge-3但没定义该断点，就等于白写
如何正确引入并定制Foundation CSS组件
直接CDN加载foundation.min.css只能用默认主题，按钮圆角、表单边框、卡片阴影全是固定值，想改就得走Sass流程——这是最容易卡住的地方。官方文档没明说“不编译Sass=基本没法定制”，很多人试了几个!important就放弃了。
- 必须用
@import 'foundation/scss/foundation'引入，不能只引css/下的成品文件 - 定制前先覆盖
_settings.scss：比如把$button-radius从0改成4px，再@import 'settings'，顺序错就无效 - 只用下拉菜单？别全量引
foundation，改用@import 'foundation/scss/components/dropdown'，体积能少掉70% - 如果你用PostCSS或Vite，注意Foundation依赖
node-sass旧版本，sass（Dart Sass）可能报function "rem-calc" not found，得换回node-sass或手动补函数
Dropdown、Modal等交互组件为什么点了没反应
Foundation的JS组件（比如Dropdown、Reveal）默认不自动初始化，只靠HTML class是不够的。你看到文档里写“add data-dropdown”，但漏了最关键的一步：JS必须显式调用$(document).foundation()或new Foundation.Dropdown()。
- 用jQuery版必须确保
foundation.js在jQuery之后加载，且$(document).foundation()在DOM ready后执行 - 用ESM方式（如
import { Dropdown } from 'foundation-sites'）时，new Dropdown()第一个参数必须是真实DOM节点，传document.querySelector('[data-dropdown]')，别传字符串 -
data-close-on-click="false"这类属性只有在JS初始化后才生效，写在HTML里但没跑JS，等于没写 - Modal内容如果是AJAX加载的，得手动调用
modal.open()，data-open按钮对动态内容无效
响应式图片和typography适配的实际处理方式
Foundation的type排版系统（h1–h6、lead、subheader）在小屏上字号缩放很保守，经常出现大标题在手机上还是28px，撑出横向滚动条。它不自动响应视口，得靠自己加vw或媒体查询微调。
-
img标签加class="thumbnail"只是加边框和圆角，不解决响应式，真要自适应必须额外加style="max-width: 100%; height: auto;" -
typography.scss里$header-scale是一组乘数，改(h1: 2.5, h2: 2)会影响所有断点，想单独控制小屏标题，得自己写@media screen and (max-width: 39.9375em) { h1 { font-size: 1.75rem; } } -
data-interchange属性虽支持多图源切换，但语法是[src1.jpg, small], [src2.jpg, medium]，逗号前后不能有空格，多了空格就解析失败，错误信息是Interchange: Could not parse data-interchange - 字体堆栈里
"Helvetica Neue"在iOS上没问题，但在安卓某些WebView里会fallback到sans-serif，建议补一个system-ui在最前
Foundation的CSS组件看着全，但每个组件背后都绑着Sass变量、JS初始化、HTML结构三重约束，少踩一个就表现异常。最常被跳过的其实是_settings.scss重载和JS手动初始化这两步，而不是写错class名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
