css中px、em、rem单位的区别
在web前端开发中我们经常遇到px、em、rem这些字体单位，那它们有哪些区别呢？
PX特点
-1. IE无法调整那些使用px作为单位的字体大小；
-2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
-3. Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用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作为单位就行了。
注意：
谷歌浏览器chrome强制最小字体为12px，因此即使设置了小于12px的值，也会显示成12px。因此，当你给html设置font-size:10px时，1rem并不是等于10px，而是等于12px；如何解决这个问题：
（1）在chrome 27之后，就取消了对这个属性的支持：html{-webkit-text-size-adjust:none;}
（2）利用css3的缩放，其最终大小就是：12px * 0.9（缩放比例） = 10.8px;
.small-font{
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.90);
}
（3）IE8及以下不兼容。此时，给对应元素添加一个类，这样就可以兼容谷歌，IE7，IE8，代码如下：
html{-webkit-text-size-adjust:none;}
body{font-size:62.5%;}
p{font-size:1.2rem;font-size:12px;}
.small-font{ font-size:12px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.90); } .smallsize-font { font-size:1.08rem;
font-size:10.8px; } <p>我是1.2rem大小的字体</p> <div class="small-font smallsize-font">我是1.8rem大小的字体</div>
显示结果：（火狐下的）
注意：在火狐浏览器中使用-webkit-transform: scale(0.90);会出现上图中的情况，字会往右偏移一部分，在样式-webkit-transform:scale(0.90);
之后添加一句-moz-transform-origin-x:0;-moz-transform:scale(1);即可解决，火狐浏览器能识别-moz前缀，结果如下：
EM特点
-1. em的值并不是固定的；
-2. em会继承父级元素的字体大小。
所以我们在写CSS的时候，需要注意：
-1. body选择器中声明Font-size=62.5%(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。
<div id="content"> <p>px、em、rem单位的区别</p> </div> css部分： body{font-size:62.5%;} #content{font-size:1.2em;/*font-size:12px;*/} #content p{font-size:1em;/*p继承了#content的字体大小，这时设置p的字体大小为1em,即为12px也就是1em=12px*/}
又如：
<div style="font-size:20px;">
<p style="font-size:1em;">这里1em=20px</p>
<p style="font-size:2em;">这里2em=40px</p>
</div>
上述例子说明了em的值并非固定的，他是根据父元素的字体大小来决定的。如果父元素设置了font-size:20px，那么1em=20px，2em=40px；如果父元素设置了font-size:30px，那么1em=30px，2em=60px。依次类推。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1rem=16px。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子p {font-size:14px; font-size:.875rem;}
<html style="font-size:100px;">
<head>
<title></title>
</head>
<body>
<p style="font-size:1rem;">这里1rem=100px</p>
<div style="font-size:50px;">
<p style="font-size:2rem;">这里2rem=200px</p>
</div>
</body>
</html>
上面的例子可以看出，rem的值只受到根节点html的字体大小影响，并不受父元素字体大小的影响。如果根节点html设置了font-size:100px，那么1rem=100px，2rem=200px；如果根节点html设置了font-size:200px，那么1rem=200px，2rem=400px。依次类推。
pt
是一个物理长度单位，指的是72分之一英寸。9pt=12px，可以依次换算。
注意：
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
在这里为大家提供一个px,em,rem单位转换工具
浙公网安备 33010602011771号