昨天tin同学和我说了关于em的事情,em又要来了吗,落伍啦!-_-!!!。
早在去年(前年?)的时候我开始试用em了,但是的确em是一个很不好控制的东西,浏览器不同,大小也不一样。于是干脆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会继承父级元素的字体大小。
注意上面的第二条:em会继承父级元素的字体大小,举个例子:如果body定义font-size:62.5%,有一个div定义了font-size:1.2em,这个div中有一个span,给他定义font-size:1.4em,我们需要的效果是:div中的字体大小是12px,而span中的字体是14px(这个太常见了,几乎随时遇到这样的表现),但是显示出来又是什么的样子呢:

span中的字体不显示14px是因为继承了div的字体高度,他认为div的12px才是1em,那么12px*1.4=16.8px,囧啊。正确的写法是:如果body定义font-size:62.5%,有一个div定义了font-size:1.2em,这个div中有一个span,给他定义font-size:1.2em,12px*1.2=14.4px,将显示14px的字体大小,如果要13px的字体怎么办?12px*1.1=13.2px,继续囧;如果我在1.4em(14px)中要12px的字高,怎么办?0.8em,再碰上一个NB的设计师,大小相间,首字下沉,天马行空,宇宙无敌,怎么说也要配一个科学计算器,如果在遇上页面字体大小调整。。。
em的存在简单来说就是支持字体缩放,如果某个显示网页的工具或是浏览器他的默认字体是32px(或是32inch),那么这些文字在整体的行高和大小将保持一个比例,如果包含这些字体的div或是边框大小也是按照字体大小来显示的话,那么都将按照比例变化。如果一个老年用户设置了自己的浏览器默认字体或是Office Word去打印的时候,em就是很棒的。
下面是做了一个em和px的比较
| |
em |
px |
| 优点 |
1、字体大小是根据显示介质来定义,页面文字大小按照介质来显示
2、字体可以按照比例缩放
3、非常方便定义行高 |
1、字体绝对大小,直观容易理解
2、在和边框背景等内容细节方面可以做像素调节
3、没有继承的问题 |
| 缺点 |
1、现在的网页主要浏览来自于浏览器,在另外的地方使用网页几乎微乎其微,em的作用并不大
2、随着IE6进入淘汰期,IE7和FF等其他浏览器已经可以对px的字体大小做放大和缩小了 |
1、尤其是IE6,px字体无法放大,给一些特殊需求的用户带来不便
2、行高的确是头疼的问题 |
已上是我自己理解的一些关于em和px的东西,其实大家都知道,99%的网页都是再用px,em用起来的确是成本比较高,不管是IE还是FF等浏览器,都在放大字体这个方面做了相应的工作,用不用em就看你的东西是用在什么地方了,要是只是给浏览器看的话,em和px有什么差别呢?