手机上px字体过小因px是绝对单位，高像素密度屏下显示面积小，且忽略用户缩放；应优先用rem配合根元素媒体查询动态调整，避免font-size:0、transform影响及calc()单位混用错误。
font-size设成px后为什么在手机上文字小得看不清
因为px是绝对单位，1px永远等于屏幕上的1个物理像素，而手机屏幕像素密度高（比如iPhone的Retina屏），同样16px在手机上实际显示面积只有桌面显示器的一半左右。用户缩放页面或系统字体设置也会被忽略。
- 移动端优先用
rem或em，让文字随根元素缩放响应式变化 - 如果必须用
px，至少配合viewportmeta标签： - iOS Safari对小于16px的
font-size会强制放大，可能破坏布局——这不是bug，是可访问性保护机制
rem和px换算关系搞错导致全站字体乱套
rem是相对于html元素的font-size计算的，不是相对于父元素。很多人误以为它像em一样继承，结果改了某一层font-size，整个页面文字大小全崩。
- 推荐在
html上用媒体查询统一设基准值，例如：html { font-size: 16px; }<br>@media (max-width: 768px) { html { font-size: 14px; } } - 写CSS时直接用
rem：标题用1.5rem就是24px（当根字号为16px时），别手动换算成px再写 - JavaScript里读取
getComputedStyle(document.documentElement).fontSize才能拿到当前生效的根字号，document.documentElement.style.fontSize只读内联样式
font-size在Flex或Grid容器里突然变小
不是font-size本身出问题，而是父容器设置了font-size: 0来消除inline-block间隙，或者用了transform: scale()等影响字体渲染的属性，子元素继承后又被rem放大/缩小，视觉上失真。
- 避免在布局容器上设
font-size: 0，改用display: flex或float替代 - 如果用了
transform，记得给文字元素单独重置font-size，比如font-size: 1rem（不依赖父级） - 检查是否意外触发了
text-size-adjust: none（iOS Safari禁用自动调整），会导致小字号文字不可读
使用calc()动态计算font-size时浏览器报错或不生效
calc()里单位混用或空格缺失是常见原因。比如calc(1rem + 2px)合法，但calc(1rem+2px)（中间没空格）在旧版Safari会失败。
- 加减运算符前后必须有空格，乘除可以省略（但建议统一加空格提升可读性）
- 不能在
calc()里嵌套函数，比如calc(1rem + min(16px, 2vw))不合法 - IE11只支持
calc()在font-size中用于固定单位组合（如px和%），rem参与运算需加/* autoprefixer */注释并配PostCSS
字体大小这事看着简单，但一旦混入响应式、缩放、兼容性、继承链，很容易在某个机型或某个嵌套层级里悄悄失效。最稳妥的做法是：根字号用JS动态设一次，所有字体用rem，避开em继承陷阱，也少碰calc()里的单位混合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
