px、em和rem的区别

由于IE无法调整那些使用px作为单位的字体大小，所以采用em作为字体单位还是蛮有优 势的。pX像素是相对长度单位。像素”是相对于显示器屏幕分辨率而言的。em是相对长度单位相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未 被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体都是16pxo所有未经调整的浏览器都符合：lcm=16px。为了简化font-size的换算，需要在css中的body选择器中声明Font-sizc=62.5%这就使cm 值变为16Px*62.5%= 10px,这样12Px=L2um, 10px=lum,也就是说只需要将你的原来的px数 值除以W,然后换上cm作为单位就行了。em有如下特点：1、um的值并不是固定的；2、um会继承父级元素的字体大小。所以我们在写CSS的时候，需要注意三点：1 body 选择器中声明 Font-sizc=62.5%；2、将你的原来的px数值除以10,然后换上um作为单位；3、重新计算那些被放大的字体的cm数值。避免字体大小的重萱声明。也就是避免1.2* 1.2= 1.44的现象。比如说你在#contuni中声明了字体大小为1.2cm,那么在 声明P的字体大小时就只能是1cm,而不是1.2cm,因为此cm非彼cm,它因继承#conknt 的字体高而变为了 lcm=12px0但是12Px汉字例外，就是由以上方法得到的12Px(1.2cm)大小的汉字在IE中并不等于直接用 12Px定义的字体大小，而是稍大一点。只需在body选择器中把62.5%换成63%就能正常显 示了。原因可能是1E处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。rem特点rum是CSS3新增的一个相对单位(root cm,根um),这个单位引起了广泛关注。这个 单位与um有什么区别呢？区别在于使用rum为元素设定字体大小时，仍然是相对大小，但 相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既 可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁 反应。目前，除了正8及更早板本外，所有浏览器均已支持mm。对于不支持它的浏览器， 应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽酩用rum设定的字体大 小。下面就是一个例子：p &mt-sizu：14px; font-size：.875rcm;注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用星新板的浏览 器，那推荐使用gm,如果要考虑兼容性，那就使用px,或者两者同时使用。