px-%-em-rem-vw-vh有什么区别？

• 1.背景介绍
• px 和 %
• em 和 rem
• vw / vh
• 3.常见问题

1.背景介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。

px 和 %

px基本单位，绝对单位（除了px其他都是相对单位）

%一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于 ViewPort（可视窗口）

em 和 rem

em 相对于当前元素的font-size，css3新单位
rem相对于根节点的font-size

第一行的内容font-size大小是 40 * 2 = 80px
第二行的内容继承父盒子的font-size 再乘2 ： 20 * 2 = 40 px

  
 第一行的内容
 第二行的内容

vw / vh

·vw屏幕宽度的1%
·vh屏幕高度的1%
·vmin 宽高两者的最小值，vmax 宽高两者的最大值

3.常见问题

问题一：

为什么一开始在css样式中给body设置font-size：62.5%？

答案一：

Font-size=62.5%这就使em值变为16px*62.5%=10px。这样1em=10px，1.2em=12px利于我们进行换算。

问题二：

在谷歌浏览器运行以下代码，1em是显示多大的字体？

body{

font-size: 62.5%;

}

p{

font-size:1em;

}

我的字体是多大？

答案二：
谷歌浏览器强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。