传统的项目开发中，我们只会用到 px、%、em这几个单位，可以适用于大部分的项目开发，并且拥有对照好的兼容性。

从CSS3开始，浏览器对付逻辑单位的撑持已经提升到了另一个境界，新增了 rem、vh、vw、vm等新的长度单位，操作这些新的单位可以开发出对照好的响应式页面，随之笼罩多种差别辨别路的终端。包孕移动设备等。

一、相对长度单位

相对长度代表着以其他距离为单位的一种尺寸。是相对的。

1、em
em相对单位，基准点为父节点字体巨细（担任父元素的字体巨细），如果自身界说了 font-size按自身来计算（浏览器默认字号是 16px），整个页面内 1em不是一个固定的值。

如果父元素设置了字体巨细，那么em就是相对付父元素的字体巨细，如果没有设置，那么就是相对付 html 根元素的字体巨细

2、rem

　　相对单位，可理解为‘root em’，相对根节点 html（网页）的字体巨细来计算，CSS3新加属性，chrome/firefox/IE9+撑持。

　　不会像 em 那样，依赖于父元素的字体巨细，从而造成混乱 。

　　rem参考物是相对付根元素的字体巨细，我们在使用时可以在根元素设置一个参考值即可，相对付 em使用，减少很大运算事情量。例如:html巨细为 10px，2em就是 20px。

（此外需要注意的是 chrome 强制最小字体为12号，即使设置为 10px，最终城市显示为12px，所以网上很多文章提到将html 的font-size 设置为 10 虽然便利计算但是不是那么可取）

　　如果没有进行设置，那么 rem 始终是跟从 html 默认巨细 16px 进行设置的。

　　使用rem 的一个特点就是用户可以通过调解浏览器的字号，进而转变页面的文本字体巨细。

　　 rem 除了可以运用在设置字体巨细之外，还可以应用在其他的元素上面。

3、ch

　　这一单位代表元素所用字体中 ‘ 0 ’ 这一字形的宽度，或者更准确的说是 ‘ 0 ’之一字形的预测尺寸（advance measure）

4、ex

　　这个单位暗示元素字体的 x 的高度。在含有 ‘ X ’字母的字体中，它是该小写字母的高度，对付很多字体而言，1ex ≈ 0.5em。

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

　　1、对付普通定位元素就是认为的父元素

　　2、对付绝对定位 position：absolute；的元素是相对付已定位的父元素

　　3、对付固定定位 position：fixed；的元素是相对付 ViewPort（可视窗口）

对付普通定位元素

父元素设置了绝对定位，子元素设置了绝对定位，所以子元素的巨细是相对付父元素的 50%.

子元素设置了固定定位

视口比例长度

视口百分比长度界说相当于 viewport 的巨细的长度值，即文档的可见部分。

1、vw

　　 v是 viewport，可视窗口的意思，w是 width，宽度的意思。

　　 视窗宽度（视口宽度的 1%）

　　 例如：浏览器宽度1200px，1vw = 1200px/100 = 12px

.main{ background-color: aqua; width:50vw; height:100px; }

2、vh

　　v是viewport，可视窗口的意思。h 是 height，高度的意思。

　　视窗高度（视口高度的 1%）

　　例如：浏览器高度900px，1vh = 900px/100= 9px

.main{ background-color: aqua; width:500px; height:50vh; }

3、vmin

　　css3的新单位，相对付可视窗口的宽度或是高度中较小的那一个。（视口高度和宽度之间的最小值的 1%）

　　此中，较小的阿谁被均分为100单位的 vm

　　例如：浏览器高度 900px，宽度 1200px，取最小浏览器高度，1vm = 900px/100 = 9px

4、vmax

　　视口高度和宽度之间的最大值的 1%

常见问题：（vh vm vw的实际运用场景）

1、元素的尺寸限制

　　当我们在网页上点击一个图片，弹框呈现原始大图的时候；或是在一屏内，没有滚动条的情况下，大图的幻灯片浏览。