minmax(300px, 1fr) 中最小值限制导致小屏下无法折行，应改用 minmax(min-content, 1fr) 或结合 clamp() 实现真自适应。
怎么用 minmax() 让网格容器真正“自适应”而不是“假响应”
很多人写 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，页面一缩就塌成一列，以为是 CSS 不行——其实是没理解 minmax() 里两个参数的真实约束关系。minmax(300px, 1fr) 的意思是：每个格子最小 300px，最大能占满剩余空间；但当容器总宽
- 真正防塌陷要配合
grid-auto-flow: column或改用auto-fill+ 显式grid-column-end控制列数上限 - 移动端慎用
1fr作最大值，换成minmax(280px, 400px)更可控 - 检查是否被父容器的
min-width或overflow: hidden拦截了重排行为
字体单位选 rem 还是 clamp()？别只看文档说的“响应式”
rem 依赖根字体大小，适合全局统一缩放；clamp(1rem, 2.5vw, 1.5rem) 能在区间内平滑过渡，但容易在某些视口宽度下触发“字体跳变”。实际项目里，标题用 clamp()、正文用 rem 是更稳的选择。
-
clamp()的中间值建议用vmin而非vw，避免横屏手机上文字过小 - Chrome 100+ 开始支持
font-size: clamp(...)，但 Safari 15.4 之前不支持calc()在clamp()内嵌套，别写clamp(1rem, calc(1rem + 1vw), 1.5rem) - 如果用了
html { font-size: 62.5% }，注意rem基准已变，clamp()里的1rem就是 10px，不是 16px
图片加载慢、布局抖动？loading="lazy" 和 aspect-ratio 必须配对用
只加 loading="lazy" 会导致图片加载前高度为 0，后续加载完成突然撑开页面（CLS 分数暴增）；只设 aspect-ratio: 4/3 又可能让低分辨率图在高 DPR 设备上模糊。两者必须一起上，且 aspect-ratio 值得按设计稿真实宽高比填，不能估。
- SVG 占位图比纯
background-color更可靠，尤其暗色主题下不会露白边 - 使用
srcset时，sizes属性必须匹配媒体查询逻辑，比如sizes="(max-width: 768px) 100vw, 50vw"，否则浏览器可能选错资源 - Next.js 或 Vite 项目中，别依赖框架自动注入
width/height—— 它们生成的值常和实际渲染宽高不一致，手动算aspect-ratio更准
Flex 布局居中失效？先查 flex-shrink 和父容器 min-width
写 justify-content: center 没反应，大概率是子元素默认 flex-shrink: 1，在窄屏下被压缩到贴左；或者父容器设置了 min-width: 1200px，导致整个 flex 容器根本不随视口收缩。
立即学习“前端免费学习笔记（深入）”；
- 居中块级元素优先用
display: grid+place-items: center，比 flex 更少意外 - 必须用 flex 时，给子项加
flex-shrink: 0防压缩，再用margin: 0 auto辅助居中 - 调试时右键检查元素，看 computed 样式里
flex-basis是不是被设成了auto或具体像素值——这会覆盖flex: 1的行为
