取值单位（px，em，rem，%，vh，vw）的区别

取值单位（px，em，rem，%，vh，vw）的区别

取值单位的分类

1、固定单位（绝对单位）：px

px：像素（pixel）的缩写，是一个相对长度单位，像素px是相对于屏幕分辨率而言的

2、相对单位：em，rem，%，vh，vw

**em：**相对长度单位，相对于当前对象内文本的字体尺寸【是所在标签的字体大小】（参考物是父元素的font-size），

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小；

例子，例如父元素为浏览器(google chrome)的默认字体尺寸，16px,则font-size:1em=16*1=16px;

1.5em=16*1.5=24px

rem:是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

（适用场景）

1、移动端开发

注：HTML根元素的含义

HTML文档的根元素是 html 元素，从 标签开始，到 标签结束。根元素的作用就是告诉浏览器，在 和 之间的内容是HTML类型，浏览器便按HTML进行解析其中的内容。

	html{font-size: 62.5%}  /* 10 ÷ 16 × 100% = 62.5% */body{font-size: 1.4rem;} /* 1.4 × 10px = 14px *//*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/
123

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：

• rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小

两者使用规则：

• 如果这个属性根据它的font-size进行测量，则使用em
• 其他的一切事物属性均使用rem

%

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

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

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

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

vw（取视口的百分比）：css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

vh（取视口的百分比）：css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。

vw、vh、vmax、vmin这四个单位都是基于视口

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

举例（for exmple）：(?如何表达vh、vw的属性值)

浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易实现与同屏幕等高的框。

calc + vm 计算宽度

width: 800px;
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

常见问题

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

浏览器的默认字体大小是16px,16*62.5%=10px,1em=10px,便于换算；

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

body{font-size: 62.5%;}

p{font-size:1em;}

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

3.如果父元素没有指定高度，那么子元素的百分比的高度是多少？

会按照子元素的实际高度，设置百分比则没有效果