viewport meta标签必须正确添加，语义化结构优先使用header/main/footer，flexbox布局比float更可控，图片需设max-width并配合srcset，字体推荐用rem单位。
viewport meta 标签必须加，且不能写错
不加或写错 <meta name="viewport">，所有后续响应式努力基本白费。常见错误包括漏掉 initial-scale=1.0、误写成 scale=1、或把 width=device-width 拼错为 with。
正确写法只有一行，必须放在 内：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
注意：user-scalable=0 会禁用双指缩放，影响可访问性，除非有强理由否则别加；maximum-scale 同理，多数现代项目应避免。
语义化结构优先用 <header></header>、<main></main>、<footer></footer>
别再用一堆 <div class="header"> 堆砌结构。浏览器和读屏器依赖这些标签理解页面骨架，SEO 也更倾向识别 <code><main></main> 里的内容为主内容。
一个典型首页结构应类似：
<header><nav>...</nav></header><main><section id="hero">...</section><section id="features">...</section></main><footer>...</footer>
要点：
-
<nav></nav>必须在<header></header>内或紧邻其后，不可散落在各处 -
<main></main>页面中只能出现一次，且不能嵌套在<article></article>或<aside></aside>里 -
<section></section>应有明确主题和id或class，避免无意义的空包裹
Flexbox 布局比 float 和百分比更可控
用 float 实现导航栏或三栏布局，容易触发高度塌陷、清除浮动失效、移动端断行错乱等问题。百分比宽度在小屏下可能让文字挤成一团，且无法自动处理溢出。
推荐首页核心容器直接启用 Flexbox：
header, main, footer {
display: flex;
flex-direction: column;
}
.main-layout {
display: flex;
gap: 2rem;
}
.hero-text { flex: 1; }
.hero-image { flex: 0 0 400px; }
@media (max-width: 768px) {
.main-layout { flex-direction: column; }
.hero-image { flex-basis: auto; }
}
关键点：
- 用
flex: 1替代width: 70%，让内容按需伸缩而非硬性切分 -
gap比margin更安全，不会触发 margin collapse - 移动端断点建议用
max-width（移动优先），而不是min-width堆叠
图片和字体单位必须配合媒体查询做分级处理
一张 1920px 宽的 banner 图在 iPhone 上加载，既浪费带宽又拖慢首屏。同样，font-size: 16px 在 4K 屏上显得过小，在小屏上又可能撑破容器。
简单但有效的处理方式：
- 所有图片加
img { max-width: 100%; height: auto; }，并补上srcset：
@@##@@
- 字体统一用
rem，根字体大小随屏幕动态调整：
:root {
font-size: 16px;
}
@media (max-width: 768px) {
:root { font-size: 14px; }
}
@media (max-width: 480px) {
:root { font-size: 12px; }
}
注意：rem 是相对于 :root 的，不是父元素；em 容易在嵌套中逐级放大，首页标题等关键文案慎用。
真正卡住响应式首页落地的，往往不是技术不会，而是 viewport 漏了、语义标签嵌套错层、或者图片没设 max-width 导致整页横向滚动——这三个点检查一遍，80% 的“看起来不像响应式”问题就解决了。
