CSS用户体验之正确使用em与px


em与px都是CSS的元素长度单位。一般来说在CSS中,选择em还是px为长度单位是个人喜好。大部分人或许觉得px比em方便。不过当设定font-size时,适用em与px就会有很大差别。清楚的了解px与em的差别和正确的使用还是很有必要的。IE浏览器无法调整px作为字体显示单位的字体大小。可是现在国内使用最广泛的就是IE。想要网站的用户体验良好这个细节是应该被注意的。

下面详解下em和px

em和px不是一样的么?
这个真不是。。

它们的共同点都是长度单位。并且都是相对长度单位。可是px是相对于显示器的分辨率来决定长度的。em是相对于对象内文本的字体尺寸。IE无法调整适用px作为文本长度单位的文本大小,但是Firefox可以。

为什么要用em?

em是相对于对象内文本的字体尺寸。所以值不是固定的。并且会继承父级元素字体的大小。

怎么使用em?要注意什么?

body选择器中声明Font-size=62.5%(IE在处理汉字对于浮点的取值精确度有限,需要将 62.5%换成63%)
将你的原来的px数值除以10,然后换上em作为单位
重新计算那些被放大的字体的em数值。避免字体大小的重复声明
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

在追求细节的道路上,与君共勉。