你的位置:首页 > 网页设计

[网页设计]看了些关于rem的知识点,在这做个自我总结归纳


我们最常用的字体单位是PX和EM。

首先px:

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

px会随着屏幕分辨率的改变而改变,但是浏览器对页面进行缩放时会对页面的整体布局产生影响。

 

em:

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

em一般会以<body>的font-size为基准,他继承于父级元素。如果多层嵌套比较容易引起混乱。例如:

<body>

  <div>

    <p></p>

  </div>

</body>

如果body中设置字体为10px,div中字体为1.2em即12px。那么如果要设置p中字体为12px,则应在p中设置1em而非1.2em。若在p中设置1.2em,则字体实际大小为1.2*1.2=1.44。

 

而css3出现了一个新的单位rem

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

也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元

素中设置多大的字体,这完全可以根据您自己的需要。

比如:

html{font-size:62.5%}/*根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。

body{font-size:1.2rem}/*12px*/

h1{font-size:1.4rem}/*14px*/

具体换算参考http://pxtoem.com/