Skip to content
Menu
编程侠
  • 首页
  • 资讯
    • 手机
  • 博客
    • 博客vue
    • 博客PHP
  • Q我
编程侠
2021-01-09

font-size: 62.5%

各浏览器默认字体字号为 16px,即 16px 相当于 1rem。

那么“font-size: 1rem; ”就等同“font-size: 16px;”,但是设计图给的20px,要求使用em单位,就需要计算一下。

如果我们定义 10px / 16px = 0.625 = 62.5% ,浏览器的默认字体为 16px * 62.5% = 10px,此时即 10px 相当于 1rem。设计图给的20px,要求用em单位,那就简单多了。

html, body {
    font-size: 62.5%; /* 10px / 16px = 62.5% 即 font-size 是 10px 相当于 1rem */
}

h1 {
    font-size: 1rem; /*10px * 1 = 10px*/
}

h2 {
    font-size: 1.2rem; /*10px * 1.2 = 12px*/
}

h2 {
    font-size: 1.4rem; /*10px * 1.4 = 14px*/
}

为何不直接定义根元素的 “font-size : 10px”呢? 因为那是为了兼容 IE6。

最新

  • 831密码安全口令
  • 链接跳转到百度地图的指定地址
  • 云服务提到的99.99%的服务可用性,这是个什么概念?
  • 兼容IE的CSS竖排文字代码
  • 网页灰度

标签

831 a标签 canvas clone csrf echarts filter GB2312 grayscale Hello html2canvas iframe prism Unicode UTF-8 wordpress world XSS 不触发 云服务 代码雨 大数据 异常 手机号 打印 拼多多 数组 文字转语音 朗读 正则 深浅拷贝 热力图 竖排 签名验证 编码 编程圈 置灰 背代码 节流 速度 链接 链接跳转 键盘 防抖 验证

友情链接

  • staggering-beauty
  • 编程侠
©2025 编程侠 渝ICP备20006693号-4