必须添加<meta name="viewport" content="width=device-width, initial-scale=1.0">才能真正实现响应式；配合calc()动态设置rem基准、flex布局和srcset/sizes图片适配，即可用极简代码适配全设备。
用 <meta name="viewport"> 才算真正开始响应式
没加这行，写再多 width: 100% 都白搭。手机浏览器默认按 980px 宽度渲染页面，不缩放——结果就是文字小得看不清、布局挤成一团。
必须在 <head> 里放这一句：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误：
- 漏写
initial-scale=1.0，iOS Safari 可能自动缩放导致字体忽大忽小 - 写成
width=375这类固定值，不同机型直接失效 - 放在
<body>里——浏览器根本不会读
rem 比 px 更适合极简主页的字体控制
不用媒体查询也能适配多数屏幕：根字体大小随屏幕宽度动态调整，所有 rem 单位自动响应。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
html { font-size: calc(16px + 0.25vw); }—— 视口宽度每增 100px，字号加 0.25px，320px 屏到 1440px 屏自然过渡 - 标题用
2.5rem、正文用1.125rem，比写死16px/24px更省事 - 避免混用
em，嵌套元素会层层放大，极简页里容易失控
只用 flexbox 布局，放弃 float 和 inline-block
三行代码撑起整个主页结构，不需要框架也不用计算百分比。
比如居中一个卡片：
<main style="display: flex; flex-direction: column; align-items: center; min-height: 100vh; margin: 0;"><br> <h1 style="margin: 0.5rem 0;">Hi</h1><br> <p style="max-width: 60ch;">一行说明</p><br></main>
关键点：
-
min-height: 100vh确保内容不满屏时也能垂直居中 -
max-width: 60ch控制段落宽度（ch是字符宽度单位），比80%更符合阅读习惯 - 别给
<body>加margin，不同浏览器默认值不同，直接用margin: 0重置更稳
图片用 srcset + sizes 而不是仅靠 width: 100%
单纯设 width: 100% 图片会拉伸模糊，尤其在高 DPI 屏幕上。
极简页里一张图就够了，这样写：
<img src="hero.jpg"<br> srcset="hero-400w.jpg 400w,<br> hero-800w.jpg 800w,<br> hero-1200w.jpg 1200w"<br> sizes="(max-width: 480px) 100vw, (max-width: 900px) 80vw, 60vw"<br> alt="描述"<br> style="width: 100%; height: auto;">
注意：
-
sizes告诉浏览器“这张图在不同断点下打算占多宽”，浏览器据此选最接近的srcset版本 - 没写
sizes时浏览器默认按 100vw 选图，可能下载远超需要的高清图 - 本地开发时用真实图片尺寸命名（如
hero-800w.jpg），避免上线后才发现分辨率错配
真正麻烦的是字体加载和第三方图标——这些没法靠几行 HTML 解决，得单独处理。但主页本身，到这一步已经能在 iPhone SE 到 27 寸 iMac 上都看得清楚了。
