HTML5响应式字号与内边距应以根字体驱动（html{font-size}）、断点分级和相对单位贯穿为核心；推荐用clamp()实现平滑缩放，并配合box-sizing:border-box确保盒模型可控。
在 HTML5 中，媒体查询是实现字号与内边距响应式调整的核心手段。关键不是“写一堆断点”，而是建立一套可维护、不冲突、尊重用户系统设置的层级逻辑——根字体驱动 + 断点分级 + 相对单位贯穿。
用 html 根元素统一控制字号基准
所有响应式字号调整必须基于 html { font-size }，而非 body 或具体标签。这是因为 rem 单位只认根字体，改它才能让全站文字自动缩放，同时保留系统缩放（如 Windows 的 125% 放大）的继承能力。
- 设默认基础值：
html { font-size: 16px; }（浏览器默认，兼容性好） - 避免写死 px：不要用
font-size: 18px这类固定值，否则会覆盖用户系统设置 - 推荐用百分比或 rem 做后续调整，例如
html { font-size: 100%; }更安全
按设备宽度分层设置字号与内边距
字号和内边距应同步响应视口变化，但不必每个都单独写断点。可以共用同一套断点逻辑，保持视觉节奏一致。
- 小屏（≤480px）：
@media (max-width: 480px) { html { font-size: 14px; } .container { padding: 12px; } } - 中屏（≤768px）：
@media (max-width: 768px) { html { font-size: 15px; } .section { padding: 16px 20px; } } - 大屏（≥1200px）：
@media (min-width: 1200px) { html { font-size: 17px; } .main { padding: 24px 40px; } }
用 clamp() 替代多段媒体查询（推荐）
对于标题、正文等关键文本，clamp(min, preferred, max) 能实现平滑缩放，比手动写断点更简洁、更自然。
- 标题流体字号：
h1 { font-size: clamp(1.5rem, 4.5vw, 2.5rem); }（最小 1.5rem，最大 2.5rem，中间随 vw 平滑过渡） - 段落内边距适配：
p { padding: clamp(8px, 2vw, 16px) 0; }（左右无内边距，上下随屏幕线性变化） - 注意：clamp() 中的单位要一致（建议用 rem 或 vw），避免混用 px 和 rem 导致计算异常
内边距响应式要点：优先用相对单位 + 配合 box-sizing
padding 不像字号那样依赖根元素，但要用对单位才能真正响应。同时必须确保盒模型行为可控。
- 禁用默认撑大行为：
* { box-sizing: border-box; }，让 padding 始终包含在 width/height 内 - 用 vw/vh/rem 替代 px：
.card { padding: 1rem clamp(12px, 3vw, 24px); }（上下用 rem 保阅读舒适，左右用 vw 保比例） - 慎用通配重置：
* { margin: 0; padding: 0; }会抹掉语义化标签（如 p、h1）的天然间距，建议只重置 body 或用 normalize.css
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
