px，%，vw，vh，em,rem 傻傻分不清楚

px: 表示的是物理像素,不会随着设备的宽度而动态变化。是多少像素就多少像素。

%：百分比，谁的百分比？指的是根据父级元素的宽度，高度来计算宽度。如果设置高度，宽度不生效，请自行审查元素看看父级元素是不是有宽高

vw，vh  视口的宽度 和 高度，100vw 100vh为全屏显示

em :  基准值为父级元素字体大小(font-size) 如父级元素font-size:30px; 1em=30px

rem:  基准值为根元素(html/:root) 的字体标准，chrome 浏览器默认为16px

大坑：chrome 浏览器默认不能显示12px 以下的字体的，设置rem 也没用喔

solution: 使用css3新特性 

.small-font{
  font-size: 12px;
  -webkit-transform: scale(0.5);
}
.smallsize-font{
  font-size: 6px;
}

transform:scale()这个属性只可以缩放可以定义宽高的元素，行内元素不生效设置display：inline-block 就可以啦