Materialize CSS 是对 Material Design 的轻量级近似实现，需按 jQuery→velocity→materialize 顺序加载依赖，表单控件须手动初始化，网格系统与官方规范不一致。
Materialize CSS 不是“开箱即用就能完全还原 Material Design 规范”的框架，它只是对官方设计语言的轻量级、前端友好的近似实现。想快速落地可用的 Material 风格界面，关键不是照搬组件，而是理解它的约定和限制。
Materialize CSS 的核心依赖项必须完整加载
它依赖 jQuery 和 velocity.js（用于动画），缺一不可。漏掉 velocity.js 会导致 dropdown、collapsible、modal 等组件点击无响应或动画失效，但控制台通常不报错，容易误判为写法问题。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
- 务必按此顺序加载：jQuery → velocity → materialize
- CDN 版本建议锁定
1.0.0（最新稳定版），避免使用未发布的2.xalpha 分支，后者 API 不兼容且文档缺失 - 如果用 Webpack/Vite，需显式
import 'materialize-css'并确保全局注入$和Velocity
表单控件必须手动初始化，否则 input 样式不生效
Materialize 对 input、select、textarea 等表单元素采用“增强式渲染”：仅靠 HTML class 不足以激活浮动标签（floating label）、下划线动画等效果，必须调用 JS 初始化。
<div class="input-field"> <input id="email" type="email" class="validate"> <label for="email">Email</label> </div>
- HTML 中必须包裹在
input-field容器内，且label的for必须匹配input的id - 页面加载后需执行
M.FormSelect.init(document.querySelectorAll('select'))和M.updateTextFields()（后者专用于 input/textarea） -
select是重灾区：没初始化就只有原生下拉；初始化后仍需在动态插入选项后再次调用instance.update()
网格系统与官方 Material Grid 不一致，别硬套响应式断点
Materialize 使用 12 列、移动端优先的栅格，但它的断点（s/m/l/xl）和行为（如 offset 计算方式）与 Google 官方规范中的 Material 3 Layout 无对应关系。强行用 col s12 m6 l4 模拟官方卡片流，常导致小屏溢出或中屏留白异常。
立即学习“前端免费学习笔记（深入）”；
- 默认断点值：
s（m（600–992px）、l（992–1200px）、xl（≥1200px）——注意没有 “sm” 或 “md” 这类语义化命名 -
push/pull类只支持整列偏移，不支持像素级微调；若需精确控制，直接写 CSS 覆盖margin-left更可靠 - 卡片（
card）本身不带响应式堆叠逻辑，要实现移动端单列、桌面端三列，必须配合媒体查询或 JavaScript 动态切换 class
图标必须用 material-icons 字体，不能混用 SVG 或第三方图标库
Materialize 的按钮、导航栏、侧边栏等组件内部通过 .material-icons 类名识别图标，且依赖 Google Fonts 提供的字体文件。若改用 fa-solid fa-home 或内联 SVG，图标会塌陷成方块或文字，且无法继承 btn-floating 的圆形背景。
<a class="btn-floating btn-large waves-effect waves-light red"> <i class="material-icons">add</i> </a>
- 必须引入 Google Fonts 的图标字体：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> - 图标名用短横线分隔（如
arrow_back），不是驼峰（arrowBack）或大写（ArrowBack） - 字体加载失败时，可加兜底样式：
.material-icons { font-family: 'Material Icons'; }防止回退到系统字体显示乱码
真正卡住进度的往往不是“怎么写”，而是“为什么写了没反应”——比如 select 不下拉、input 标签不浮动、图标变方块。这些问题全指向同一个事实：Materialize 是个需要 JS 驱动的 CSS 框架，而非纯样式库。漏掉初始化、顺序错、字体没加载，都会让界面停留在“看起来像但动不了”的状态。
