动态rem

动态rem免费看

什么是rem,rem和em的区别是什么,怎么使用 JavaScript 动态调整rem

2018-09-11侠课岛    初级拔高       

前端/前端/响应式网站基础入门 20     0     3698

什么是rem

rem是一种相对字体大小单位,这个单位代表根元素的 font-size 大小(例如 <html> 元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值,默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍。

rem和em的区别

因为行业背景,国内的设计师大多数比较喜欢用像素(px),而国外的网站大多喜欢用em火rem,在这里我们重点讲一下rem和em的区别:

em特点:

  1. em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  2. em的值并不是固定的
  3. em会继承父级元素的字体大小

rem特点:

  1. rem是CSS3新增的一个相对单位
  2. 使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素
  3. 通过rem既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应
  4. 不兼容IE8

所以,rem和em虽然都是相对单位,但是其本质区别是:rem是根据HTML的根节点来计算的,而em是继承父元素的字体大小

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

20

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?