HTML结构必须语义化且扁平，CSS优先用flex/grid、慎用float/absolute，媒体查询精简至3–4个关键断点，图片字体需优化，viewport meta不可或缺。
直接说结论：HTML 结构不合理，CSS 再怎么写媒体查询也救不回来；CSS 用 float 或过度嵌套选择器，响应式就容易在小屏上错位、重绘卡顿。真正的高性能响应式，始于语义化 HTML，成于克制的 CSS。
HTML 结构必须语义化且扁平
很多页面在 iPad 上文字挤成一团、导航栏消失，根本原因不是 CSS 没写 @media，而是 HTML 里一堆 <div class="wrap"><div class="inner"><div class="content">...</div></div></div>——层级太深，CSS 一加 max-width 或 flex 就连锁失效。
- 优先用
<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>替代无意义的<div> <li>避免超过 3 层嵌套；比如产品卡片，直接 <code><article class="product"></article>，别套<div class="list"><div class="item"><article><li>响应式依赖 DOM 可预测性：<code><picture></picture>配srcset才能按视口加载合适尺寸图，但前提是<img alt="HTML布局与CSS样式协作：打造高性能响应式页面" >不被包在 5 层div里干扰选择器权重 - 导航栏横向布局 → 用
display: flex+flex-wrap: wrap，小屏自动折行，比float: left稳定得多 - 网格类内容（如文章列表、商品卡片）→ 直接上
display: grid，配合grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，一行几列由容器宽度决定，不用写多个断点 - 绝对定位仅用于模态框遮罩层、工具提示等“脱离流但位置固定”的场景，不要用来做主体布局
- 推荐断点：
@media (max-width: 480px)（iPhone 竖屏）、@media (max-width: 768px)（iPad 竖屏）、@media (max-width: 1024px)（iPad 横屏/小桌面）、@media (min-width: 1200px)（常规桌面） - 断点值写在
rem或em而非px，比如@media (max-width: 30rem)，适配缩放字体时更可靠 - 优先用移动优先写法：基础样式写默认（小屏），大屏用
@media (min-width: ...)覆盖，避免重复声明和 !important -
<img alt="HTML布局与CSS样式协作：打造高性能响应式页面" >必须带width和height属性（或用aspect-ratio），防止加载时布局跳动 - 用
<picture></picture>+<source media="..."></source>提供不同 DPR 和视口下的图源，而不是只靠srcset让浏览器猜 - 自定义字体用
font-display: swap，确保文本不因字体加载延迟而空白；WOFF2 格式必选，体积比 WOFF 小 30%
CSS 布局优先用 flex 和 grid，慎用 float 与 position: absolute
float 在响应式中极易引发高度塌陷、换行错乱；position: absolute 会让元素脱离文档流，@media 改宽高后定位基准丢失，尤其在 iOS Safari 中表现不稳定。
媒体查询不是越多越好，关键断点只保留 3–4 个
有人写 8 个 @media (max-width: 320px) 到 @media (max-width: 1440px)，结果 CSS 文件暴涨、维护困难，而且多数断点之间样式几乎没变——纯属冗余。
立即学习“前端免费学习笔记（深入）”；
图片与字体加载直接影响响应式体验
一个 3MB 的未压缩 Banner 图，哪怕布局再完美，在 3G 网络下也要白屏 4 秒以上——用户根本看不到你的响应式设计。
最常被忽略的其实是 HTML 的 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ——漏掉这行，所有 CSS 媒体查询都形同虚设。它不在 CSS 里，但决定整个响应式是否生效。
