方法一:仅使用 em
浏览器默认的字体高度是16px,在未经调整的浏览器里 1em = 16px,也就是说1px = 0.0625em 。所以10px = 0.625em ,12px = 0.75em 。依次类推,可以将px的值直接转化成em。方法二:使用 % 加 em
1)首先在body在将字体大小设为 62.5%(16px * 62.5% = 10px)。2)在需要改变字体大小时,改用em设值。如:12 px = 1.2em (12px = 10px * 1.2),14 px = 1.4em (14px = 10px * 1.4)等等。
不过,使用第二种方法要注意的是:IE在处理汉字时,对于浮点的取值精度有限,62.5%会比12px的字看起来略微大一点点。只需将 62.5% 改为 63% 即可。
但是,无论是使用上述哪种方法,关于 em 设值的两个特点都是必须注意的:
1)em 的值并不是固定的;
2)em 会继续父级元素的字体大小。如父字体设置为1.4em ,子字体设置为 1.2 em ,那么子字体的实际值是 1.2 *(父字体的实际大小)。
只要注意了em的这个继承属性,就可以使网页中的字体大小按用户需要自由缩放了。