CSS中emrem和px的区别
Posted PeterSpeaking
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中emrem和px的区别相关的知识，希望对你有一定的参考价值。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px，1rem=16px。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是html根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！那么我们就在ie678中用px做兼容处理，例如：
.box {
font-size: 14px; /* 用来兼容ie678 */
font-size: 0.875em;
}
PX特点
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱。
以上是关于CSS中emrem和px的区别的主要内容，如果未能解决你的问题，请参考以下文章