什么是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特点:
- em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
- em的值并不是固定的
- em会继承父级元素的字体大小
rem特点:
- rem是CSS3新增的一个相对单位
- 使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素
- 通过rem既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应
- 不兼容IE8
所以,rem和em虽然都是相对单位,但是其本质区别是:rem是根据HTML的根节点来计算的,而em是继承父元素的字体大小