优先用 rem 而非 px,因 rem 随系统字体和缩放响应变化,提升可访问性;px 仅适用于图标、边框等固定尺寸元素;需注意根元素 font-size 是否被重置影响 rem 计算。
font-size 用 px 还是 rem?别直接抄网上代码
浏览器默认字号是 16px,
和
在多数情况下效果一样,但一旦用户调大系统字体或页面缩放,
会响应变化,
不会。移动端适配、可访问性要求高的项目必须优先考虑
或
。
常见错误:在 CSS 里写死
,结果视障用户开启系统大字体后文字被切掉或排版崩坏。
适合固定尺寸图标、边框等不需要缩放的元素,文字慎用
基于根元素
的
,改一处就能批量调全站字号
相对于父元素,嵌套深时容易失控(比如父级
,子再设
,实际是 0.96 倍)
现代项目推荐:根元素设
,兼顾最小/最大限制和流体缩放
内联 style 写 font-size 要加单位,不然无效
HTML 中用
属性写样式时,
后面必须带单位,否则浏览器直接忽略。常见错误是复制粘贴时漏掉
或写成
—— 这行代码等于没写。
示例对比:
立即学习
“
前端免费学习笔记(深入)
”;
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
所有长度值(包括
、
、
)在
里都必须带单位
是唯一例外,可不带单位(
合法,
也合法)
内联样式优先级高,调试时注意是否被它意外覆盖了 CSS 文件里的设置
body 默认字号不是 16px?检查有没有重置 CSS
有些项目用了
或自定义重置,会把
或
的
改成
或
,目的是让
,方便用
算数(比如
)。但这个改动会影响所有基于
的计算,且容易被遗忘。
排查方法:打开开发者工具,选中
元素,在 Styles 面板里搜
,看是否被第三方 CSS 修改过。
若用了
,那
(因为 16px × 62.5% = 10px)
若没做任何重置,
就是浏览器默认的 16px
不同框架默认行为不同:
不动根字号,
默认也不改;但某些 UI 库会悄悄改
font-size: smaller/larger 是相对谁?别指望它精准
和
是相对「父元素当前计算后的字号」动态调整,不是固定增量。比如父级是
,子用
可能变成
(浏览器按比例放大),下次再嵌套又变一次,结果不可控。
真实场景中几乎没人靠它做精确排版,更适合快速原型或临时调试。
具体放大比例由浏览器决定,Chrome 和 Firefox 结果可能不同
无法与
/
混合计算,比如
语法错误
可读性差:别人维护时看到
得往上翻好几层才能知道实际多大
真正需要弹性字号,用
或媒体查询更靠谱
字体大小这事,表面是改个数字,背后连着用户设备、系统设置、CSS 继承链和框架默认行为。最常出问题的地方,是以为
天然“响应”,却忘了根元素早就被某个 reset.css 悄悄改过。
font-size: 16pxfont-size: 1remrempxrememfont-size: 14pxpxremhtmlfont-sizeemfont-size: 0.8em1.2emfont-size: clamp(14px, 0.875rem, 16px)stylefont-sizepxfont-size: 14 正常显示
实际按浏览器默认字号渲染
font-sizemarginwidthstyle0margin: 0font-size: 0normalize.cssbodyhtmlfont-size10px62.5%1rem = 10pxrem1.4rem = 14pxremhtmlfont-sizehtml { font-size: 62.5%; }1rem = 10px1remBootstrap 5Tailwindsmallerlarger15pxlarger17.5pxpxremfont-size: larger + 2pxlargerclamp()rem