字号缩放需同步调整字重和行高：h1放大时font-weight至少加100或设bold，避免单薄；line-height用无单位值动态收敛（如1.2～1.3）；根字号用px/rem定基准，组件内统一用rem，慎用em嵌套；媒体查询只覆盖必要差异，断点依内容而非设备设定，并保持视觉权重关系稳定。
字号缩放不等于视觉层次，得同步调字重和行高
把 h1 从 24px 改成 36px，但 font-weight 还是 400，结果它看起来比没加粗的 h2 还轻——人眼对“重量”变化比大小更敏感。字号每升一级，font-weight 至少加 100（比如从 500 到 600），或直接用语义值：font-weight: bold。
别用 font-weight: 100～300 配大字号，易显单薄；确认字体文件真包含对应字重（比如设了 600 却只加载了 400 和 700，浏览器会模拟加粗，边缘糊）；小屏慎用 900，像素精度压不住。
line-height 必须随字号动态收敛：小字号（14px）可用 1.5，大字号（32px）建议降到 1.2～1.3；绝对值如 line-height: 24px 会破坏缩放一致性；优先用无单位值（1.3），它始终相对于当前 font-size。
rem 和 em 混用导致字号失控，根字号必须稳
用 em 写组件内文字，又在外层容器设了 font-size: 0.875em，结果所有子元素被连环缩小，.badge 字直接缩到 10px 看不清。根源在于 em 是继承父级计算的，嵌套越深越难控。
更稳的做法是：
- 根元素用
px或rem定基准（如:root { font-size: 16px; }） - 组件内部统一用
rem，保证全局层级可预期 - 仅在需继承缩放的局部（如按钮里的图标旁文字）才谨慎用
em
别在同一个组件里混用 rem 和 em 控制同一类文本；rem 基于根字号，适合主标题、段落等结构性文字；em 基于父级，适合微调或响应式缩放场景。
媒体查询里只改断点样式，别重复定义基础排版
在 @media (max-width: 768px) 里重新写一遍 body { font-size: 14px; line-height: 1.4; } 没问题，但若同时把 h1、p、.card-title 的字号、字重、行高全复制粘贴一遍，就埋下维护隐患——某天要调全局行高，得改三处。
推荐做法：
- 基础排版（
font-size、line-height、font-weight）在根级或通用选择器里定义 - 媒体查询只覆盖“必要差异”：比如手机端
h1缩到28px，但保持font-weight: 700和line-height: 1.25不变 - 用
clamp()替代多层媒体查询时，line-height也得同步用clamp()或 JS 动态配比，否则断点处行距突变
断点不是设备尺寸，而是内容撑不开的临界点
按“iPhone X 屏宽 375px”设第一个断点，结果一个带表格的页面在 425px 就横向滚动——断点该由内容决定，不是设备。
实际判断依据：
- 文字是否开始换行过碎（比如一行只剩两个字）
- 卡片宽度是否让图文比例失衡（图太窄、字太挤）
- 导航栏是否被迫折行或隐藏关键项
每个断点都应伴随视觉权重关系校验：桌面端 h2 比 h3 “重”两档，手机上还得维持这个差距。数值可以变，但认知距离不能塌——这是最难盯住、也最容易被忽略的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
