核心提示:我们最常用的字体单位是PX和EM。首先px:px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)px会随着屏幕分辨率的改变而改变,但是浏览器对页面进行...
我们最常用的字体单位是PX和EM。
首先px:
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
px会随着屏幕分辨率的改变而改变,但是浏览器对页面进行缩放时会对页面的整体布局产生影响。
em:
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
em一般会以
的font-size为基准,他继承于父级元素。如果多层嵌套比较容易引起混乱。例如:<body> <p> <p></p> </p> </body>
如果body中设置字体为10px,p中字体为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*/