<p>Pure CSS 响应式网格需额外引入 grids-responsive-min.css，否则 pure-u-{breakpoint}- 类无效；pure-u- 全局固定宽度，pure-u-{breakpoint}-* 仅在对应断点生效。</p>
Pure CSS 的网格系统本身已是轻量级响应式方案，但直接用 pure-g + pure-u-* 默认不启用响应式断点——你得手动加载对应 CSS 并理解类名行为，否则在小屏上会塌成一列或错位。
必须显式引入 grids-responsive-min.css
Pure 5.0+（及当前主流 2.x）默认的 pure-min.css 只含基础网格（非响应式），pure-u-1-2 这类类名在所有屏幕下都固定为 50%，不会随视口缩放自动调整。要让它“响应”，必须额外加载响应式网格模块：
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">- 注意：不能只靠
pure-min.css，也不能漏掉grids-responsive-min.css—— 否则pure-u-sm-1-2、pure-u-md-1-3等带断点前缀的类完全无效 - 旧版（如 0.5.0）还分 IE 兼容版，需用条件注释，但现代项目可忽略
grids-responsive-old-ie-min.css
pure-u-* 和 pure-u-{breakpoint}-* 的行为差异
两类类名共存，但作用完全不同：
-
pure-u-1-2：全局生效，无视屏幕宽度，始终占 50% -
pure-u-sm-1-2：仅在sm及以上断点（≥768px）生效；更小屏幕回退到无前缀类或默认流式布局 - Pure 官方断点定义为：
xs（sm（≥768px）、md（≥992px）、lg（≥1200px）——这些前缀必须配合grids-responsive-min.css才起作用 - 常见误写：
pure-u-small-1-2或pure-u-tablet-1-2—— Pure 不识别，只会被浏览器忽略
避免塌陷：父容器必须加 pure-g，且子元素必须是 pure-u-* 直接子级
网格失效最常因 DOM 结构不合规：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div class="pure-g"><p><div class="pure-u-1-2">内容</div></p></div>——pure-u-1-2不是pure-g的直接子元素，CSS 选择器.pure-g > .pure-u-*不匹配，宽度归零或撑满 - 正确结构：
<div class="pure-g"><div class="pure-u-1-2">内容</div><div class="pure-u-1-2">内容</div></div> - 响应式叠加时，推荐优先用带断点类，例如：
pure-u-1 pure-u-sm-1-2 pure-u-md-1-3表示：手机全宽 → 平板半宽 → 桌面三分之一宽
图片与内边距需额外处理，pure-img 不解决间距问题
pure-img 只负责让 <img> 自适应父容器宽度并保持比例，但它不提供 margin/padding。实际排版中相邻图片会紧贴：
- 加一层包裹容器 + 自定义类是最稳妥方式，例如：
<div class="l-box"><img class="pure-img"></div>，再配.l-box { padding: 1em; } - 不要依赖
box-sizing: border-box强制给pure-u-*元素加 padding —— 因为 Pure 的网格计算基于 content-box，padding 会挤占可用宽度，导致换行 - 若需等高卡片布局，Pure 本身不提供 flex 对齐，得靠额外 CSS（如
display: flex; align-items: stretch;）或 JS 补齐
真正轻量的关键不在删代码，而在只加载 grids.css 或 grids-responsive-min.css 中的一个，且确保 HTML 结构严格符合 Pure 的父子层级约定——多一个 <p> 包裹，就可能让整行网格失效。
