双栏布局中字体大小应以根元素 font-size 为基准，统一用 rem 单位；语义标签（h1–h3）、line-height（无单位值）、margin（rem）协同构建视觉层级，而非手动设不同 font-size。
双栏布局里 font-size 该按什么基准设
双栏简历或内容页中，字体大小不能靠“感觉”调，得先定根字号（html { font-size: 16px; }），再用 rem 统一驱动。左侧栏（个人信息、技能标签）和右侧栏（项目、经历）虽然列宽不同，但文字层级必须共享同一套缩放体系，否则视觉节奏会断裂。
常见错误是给左栏写 font-size: 14px;、右栏写 font-size: 16px;——表面看“左边小点合理”，实则破坏了可访问性缩放和响应式一致性。浏览器放大字体时，像素值不会变，rem 才会跟着根字号同比例放大。
- 根元素设
html { font-size: 100%; }（即默认 16px），最稳妥；想适配移动端可结合@media动态调，比如小屏设为87.5%（14px） - 标题统一用
h1 { font-size: 2.5rem; }、h2 { font-size: 2rem; }，不依赖浏览器 UA 默认值 - 段落、列表项等正文内容统一走
p, ul, li { font-size: 1rem; }，避免嵌套时因em累积失真
左右栏文字大小差异靠什么体现
不是靠 font-size 数值拉开差距，而是靠语义标签 + 行高 + 间距组合出视觉层级。比如左侧“技能”用 h3 标签配 font-size: 1.25rem;，右侧“项目标题”用 h2 配 font-size: 1.5rem;——差异来自语义权重，不是“左栏故意做小”。
如果硬要用不同字号体现主次（如技能标签比项目标题小一号），优先改标签层级，而不是在同级元素上手动设 font-size: 0.9rem;。后者会导致：无障碍工具无法识别重要性、打印样式错乱、缩放后比例崩坏。
- 左侧栏多用
h3、small、span，右侧栏主标题必用h2或h1 - 同一栏内，相邻文本块的
font-size差值建议控制在 0.25rem 以内（如 1rem → 1.25rem），超过易显割裂 - 别用
font-weight单独强化层级——加粗要配合字号与间距，否则文字发虚或拥挤
line-height 和 margin 不同步调就白调 font-size
双栏中文字变大后最常出问题的地方：左侧栏头像下方的姓名突然贴着职位描述、右侧项目列表行距变窄、两栏底部对不齐。这些都不是 font-size 的锅，是 line-height 和 margin 没跟上。
line-height 必须用无单位值（如 1.5），它会自动乘以当前 font-size 得到真实行高；若写成 24px，换字号后行高就固定不变，立刻挤压文字。
- 全局设
body { line-height: 1.5; }，所有子元素继承，不用每处都写 - 段落间距用
margin-bottom: 1.5rem;（不是1.5em），确保随根字号缩放 - 左侧栏的
.contact-info若用display: flex;布局，记得设align-items: center;，否则文字垂直位置会因行高变化偏移
打印和屏幕阅读器对双栏字体的隐性要求
很多人调完双栏只在 Chrome 里看效果，结果打印出来文字挤成一团，或者屏幕阅读器把左侧技能标签读成“普通段落”。这是因为：打印样式表默认禁用大部分 CSS，而无障碍 API 依赖语义标签而非视觉大小。
真正影响输出的不是你写了多大的 font-size，而是你有没有让结构本身传递信息。比如左侧“教育背景”用 section 包裹并加 aria-labelledby="edu-title"，右侧“工作经历”也如此处理——这样即使所有字体被重置为 12px，逻辑关系仍在。
- 打印样式里加
@media print { * { font-size: 12pt !important; } }是下策；上策是提前用rem设计好缩放曲线，让 12pt 成为自然结果 - 避免用
font标签或style="font-size: ..."写内联样式，它们无法被打印样式或无障碍工具覆盖 - 双栏容器（如
.resume）别设font-size，它只是布局壳，字号应由内部语义元素自己声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
