px：像素（Pixel），相对长度单位，相对于设备显示器屏幕分辨率的大小。
em：相对长度单位，相对于当前对象内文本的字体尺寸，若未设置文本字体大小则相对于浏览器默认字体大小。
rem：相对HTML根元素的大小，用rem为单位，只需要设置html的字体就可以了。看下面的代码可能会比较直观些：
<!DOCTYPE html>
<html style="font-size: 40px;">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-size: 0.3rem;/* 0.3rem相当于12px,得到的方法为：12/40=0.3 */
}
.test1{
background-color: pink;
width: 2.5rem;/* 2.5rem相当于100px,得到的方法为：100/40=2.5rem */
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
margin: 1rem;
}
</style>
</head>
<body>
<div class="test1">100*100的正方形</div>
</body>
</html>这样可以实现自适应还不变形，只要改html标签的字体大小就可以实现整体大小的更改。
