响应式网页应优先使用 flexbox 和 grid 布局，避免 float 与 inline-block；采用移动优先的 min-width 媒体查询，字体用 rem 但保持根字号为 100%。
用 flexbox 替代 float 布局，别碰 display: inline-block
响应式网页的底层骨架，不是靠框架撑起来的，而是靠 CSS 的布局模型选对了没。现在还用 float 清除浮动、靠 margin 硬调间隙，等于在现代浏览器里开拖拉机——能跑，但卡顿、易错、改起来反人类。
真正轻量又可靠的起点是 flexbox：它原生支持主轴/交叉轴对齐、自动换行、等比伸缩，而且 IE11+ 就已稳定支持（flex-wrap 和 gap 在 Safari 14.1+ 才完整）。
-
flex-direction: column在移动端优先时比写一堆@media更直接 -
flex: 0 0 300px比width: 300px更安全——不会被父容器flex-grow拉伸变形 - 避免用
display: inline-block实现栅格，它会因换行符或空格产生不可控间隙，调试时经常以为是 margin 没清干净
grid-template-areas 写语义化布局，比数字栅格快得多
你不需要记住“12列栅格系统”或者算 calc(100% / 3 - 20px)。用 grid-template-areas 直接把布局画出来，可读性高、维护成本低，而且天然适配响应式断点切换。
比如一个典型三栏结构：
立即学习“前端免费学习笔记（深入）”；
grid-template-areas: "header header header" "nav main aside" "footer footer footer";
到小屏时只要改一行：
grid-template-areas: "header" "nav" "main" "aside" "footer";
-
grid-area名字必须全小写、无空格、不带中划线（main-content❌，maincontent✅） - IE 不支持
grid-template-areas，如果还要兼容 IE11，得降级回flexbox+order控制视觉顺序 - 不要给
grid容器设width: 100%再加max-width，它默认就自适应；强行设反而容易和fr单位冲突
媒体查询只写 min-width，别用 max-width 做断点
写 @media (max-width: 768px) 看似直观，但实际项目中会不断叠加、覆盖、冲突。主流做法是「移动优先」，所有基础样式默认为小屏，再用 min-width 向上增强。
- 断点值统一用设计稿给的视口宽度（如
768px、1024px），别自己凑整成767px或770px，否则和设计对不上 - 同一组件的不同断点规则，尽量写在一起，而不是散落在不同文件里——否则改个 padding，要翻 5 个地方
- Safari 对
rem在媒体查询里的解析有延迟，如果用@media (min-width: 20rem)，建议换成px值，避免某些机型下断点失效
字体单位用 rem，但根字号别靠 html { font-size: 62.5% }
这个写法看似让 1rem = 10px 方便计算，但它会让所有继承自根元素的字体大小都受此影响，包括 button、input 等原生控件，结果是表单文字突然变小、点击区域缩水、iOS 上输入框光标错位。
- 推荐做法：
html { font-size: 100% }（即浏览器默认 16px），然后用1.25rem、1.5rem这类比例值，既保持可读性，又不破坏原生行为 - 如果真要动态适配（比如随屏幕宽度调整根字号），用 JS 设置
document.documentElement.style.fontSize，而不是纯 CSS hack - 注意
em是相对父元素的，嵌套深了极易失控；rem是唯一可控的相对单位，但前提是别动根元素的基准
响应式的复杂点不在怎么写，而在哪一层做决策：布局逻辑交给 flex 和 grid，断点控制收束在媒体查询，字体缩放止步于 rem。越早把这三层分开，后面改起来就越不心慌。
