CSS3 相对单位rem

CSS3 新增了一个相对单位rem(root em,根em)。

使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

在W3C官网上是这样描述rem的——“font size of the root element” 。

em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需.

html { 
  /*10 ÷ 16 × 100% = 62.5% :定义了以10px为基准*/
  /*设置这个值主要方便计算,如果没有设置,将是以“16px”为基准*/
  font-size: 62.5%;  
} 

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

h1 { 
  /*2.4 × 10px = 24px*/ 
  font-size: 2.4rem; 
} 

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值