CSS中em和px单位的区别(转)

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点，看过以后确实收获很大。平时都是用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；
3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是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会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

转载于:https://www.cnblogs.com/wangbin/archive/2010/04/09/1707960.html

CSS中em和px单位的区别(转)相关推荐

css中em与px的介绍及换算方法
em是什么? em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font -size的 ...
H5 CSS中的尺寸及单位
尺寸及单位说明:在HTML中可以不写单位,但是在CSS中必须书写. 单位: px:像素,绝对单位 %:百分比,相对单位,相对于父级元素 em:相对于父级元素的倍数 rem:相对于HTML元素的倍数 ...
html与css中em怎么用,css中em什么意思
em是css中的一个相对长度单位,相对于当前对象内文本的字体尺寸:如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器默认字体尺寸.可以作用在width.height.line-height.mar ...
html 10em,css中em什么意思？
在构建css样式表的时候常用的单位有px,em,rem,在实际应用中已经很少使用px,"px是绝对单位,em则是相对单位. css中em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前 ...
CSS中100%和inherit(继承)的区别，以及inherit的简单应用
CSS中100%和inherit(继承)的区别正常情况下没有区别兼容性 100% ie6+ inherit ie8+ 该元素绝对定位,父元素使用静态定位(static)或没有使用定位时 100%继 ...
CSS 中的像素(px)
CSS 中的像素(px) px 是一个我们经常在开发中使用的一个单元; 它表示在屏幕上展示的最小单元; 但是, 在 CSS 中像素可能和我们想象的不太一样. CSS 中的 px 是逻辑距离还是物理距离 ...
说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
css中em和rem是什么，有什么区别？
文章目录前言一.em是什么? 二.rem是什么? 三.em和rem的区别前言在我们学习css的时候会遇到三种常见的长度单位:px.em.rem.px是像素,相信大家并不陌生,那em和rem又是 ...
关于css中em的值
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...

CSS中em和px单位的区别(转)

CSS中em和px单位的区别(转)相关推荐

最新文章

热门文章