CSS 1em 什么意思?CSS懂一点的人进来看下

html-css031

CSS 1em 什么意思?CSS懂一点的人进来看下,第1张

em和px两种字体单位的区别

字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。

我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。

怎么将px换成em呢?特地转jorux06年12月的一篇文章,因为中文站用px的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教:

em是何物?

em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。em有如下特点:

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

重写步骤:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级 元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

诡异的12px汉字(原因待查)

本人在完成em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而 是稍大一点。这个问题我已经解决,你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有 限。阅读本篇的读者还有其他解释吗?

本现象只发生在12px的汉字,英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm, 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css,看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接

PX

一般来说,我们会使用px来作为网页设计的单位,除了它精确度较高以外,对于许多网页设计师来说也是相当容易入门的单位。

px的特性是属于绝对数值,他不受外围的单位影响,只要固定是12px,就会以12像素呈现。以下方的范例来说,他并不会受到外围文字大小所影响,内部的文字大小还是依据CSS设定所呈现。

em

另一个常见的文字单位是em, em是相对的的数值单位,它会受到外围的文字大小所影响,而1em即是1的文字大小,1.5em也就是1.5倍的文字大小。

以下方的范例可以发现,如果外围是以15px,内层的文字第一层1em等同于15px,随后的依比例放大。

接下来改成使用em来做实验,外层的文字大小直接从1.4em开始,可以看到内层的1em文字大小等同于外层1.4em,随后的逐渐放大。如果在加入一层在内部,文字就会以1.4 * 1.4的倍数再放大,这是em的相对比例单位的特性,是优点也是缺点,如果无法掌握就容易失控。

rem也是相对的文字尺寸,和em使用方法接近,不同的是他仅相对于root层级的文字大小(网页中的html)。

以这个范例来说,此网站的文字大小是16px,rem的尺寸就是以16px为基准,故下方的1rem会与16px相同尺寸。所以无论外层是否有其他文字大小,皆不会影响rem的尺寸,唯一会影响rem比例的只有html的文字大小。

使用rem时,可以先了解浏览器的限制,rem是不支援IE8以前的浏览器的喔。