HTML/CSS 桌面转移动端时字体未自动缩放的原因及是否需用@media query

你最初预期em单位会自动适配不同屏幕尺寸的认知存在偏差。em从来不是和视口尺寸绑定的适配单位，它的计算逻辑完全和父级字体挂钩：

• 当给元素设置font-size: Xem时，最终渲染值是基于该元素父级继承得到的字体大小计算的，和屏幕宽度、高度没有任何直接关系
• 你当前的代码结构里，从<html>根节点到body、section、.title全程没有自定义过字体大小基准，浏览器默认根字体为16px，因此.title设置的7em最终固定渲染为112px——无论视口是375px的移动端还是1920px的桌面端，只要继承链上的基准值不变，字体大小就不会随屏幕尺寸变化。这也是为什么你能看到body边距上用的vw单位会随屏幕缩放，但字体没有任何变化的原因。

你不需要只靠@media媒体查询，可根据需求选择对应方式：

• 用视口相对单位直接绑定屏幕尺寸
  直接给字体设置视口单位（比如vw，即视口宽度的1%），无需写媒体查询就能自动适配屏幕。比如将.title的字体改为font-size: 12vw，在375px宽的手机上会自动计算为45px，在1920px宽的桌面上会自动计算为230px。
  如果怕极端屏幕下字体过大/过小，可以用clamp()设置上下限，比如font-size: clamp(2.5rem, 10vw, 7rem)，逻辑是字体最小不低于2.5rem，最大不超过7rem，中间区间随视口宽度平滑变化。
• 基于根节点基准值配合rem做适配
  调整<html>根节点的字体大小（通常在不同屏幕断点下设置不同的根字体值），所有使用rem（相对根节点字体的单位）的元素都会自动跟随缩放。因为em是基于父级字体计算，只要对应父级的字体值调整，em单位的属性也会同步变化。
• 传统@media媒体查询适配
  这是最直观的实现方式：直接在移动端断点（比如@media (max-width: 768px)）下，单独给.title、行内设置了2em的coming soon文本设置更小的字体值，即可实现移动端的字体缩小。

你的当前HTML结构中，<section>标签没有被包裹在<body>标签内，不符合HTML语法规范，可能引发浏览器的怪异渲染，建议将该节点移动到<body>标签内部。

内容的提问来源于stack exchange，提问作者giaggi