字体单位:rem还是em?

  • A+
所属分类:CSS 推荐文章

做前端设计的童鞋们,相信这两年也或多或少的接触或使用到rem这个单位了。

从字面上看,rem和em很像,从意义上来讲,也很像,都是相对大小。rem是相对于根元素(html)的大小,em是相对于父元素的大小。

现在绝大多数的浏览器默认的字号大小为16px,也就是说,如果你网页的样式表中没有定义html的font-size的话,则默认使用浏览器的标准字号。

字体单位:rem还是em?

举个例子:

在上面的html代码中,如果定义<p>的font-size为1em的话,根据em是相对于父元素大小的规则,要想知道<p>标签文字大小,需要知道它的父元素,即<li>的font-size值。如果<li>标签没有指定font-size的话,则要向上级追溯,看<ul>标签的font-size值。如果<ul>标签也未指定,则继续向上追溯<div>、<body>、<html>,如果<html>也没有指定font-size的话,则直接使用浏览器默认值。

如果定义<p>的font-size为1rem的话,则跳过了li、ul、div、body,直达html,如果<html>设定了font-size值,则<p>标签的font-size就与<html>的相同,如果<html>没有设定font-size,则<p>标签的font-size则与浏览器默认值相同。

因此,如果采用rem的话,只要设定了html的font-size值,则其下各元素的font-size也就很明确了。

如果需要适配不同尺寸终端的话,只需要根据不同的终端设置不同的html的font-size就可以了。

字体单位:rem还是em?

一般来说,根据浏览器的默认字体大小,会将16px设定为1em。如果想将网页中的某元素,比如<h1>的字体大小显示为21px,按上表计算,则需将h1的font-size设为1.313rem,这样的数字难看又难记。所以,在实际工作中,为了方便使用,人们通过会进行如下设置:

也就是说将当前网页的根元素html的font-size设定为浏览器默认值16px的62.5%,即10px。这样,网页中其它元素font-size的设定都相对于html进行十进制运算。如上述例中,欲将h1的字体大小设置为21px,只需设置h1的font-size为2.1rem即可。

但是,所有的文章都怕但是。

rem毕竟是CSS3中的新鲜玩意儿,老款的浏览器不支持,比如IE6-8。怎么办?有两个办法。

一、到http://www.bootcdn.cn/rem/下载rem.js,hacker一下。

二、无视IE6-8,愿意用老款浏览器,就要承受不美观的效果。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: