CSS3常用长度单位

css3的单位很多，那天用到了vw写页面布局，挺好用的，今天整理下常用的css3单位

根据屏幕大小写的，适应性很强的：vw、vh、vmin、vmax

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100。
div元素大小设置时：

        .bodydiv {
            width: 10vw;
            height: 1vw;
            background-color: red;
        }

当屏幕宽度为1295时，width=1295/10,height=1295/100

字体设置时：

        html {
            font-size: 24px;
        }
        body {
            font-size: 1vm;
        }/*  24*1=14px   */

比如：

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100。

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

---

根据父级的字体大小写的rem

rem是相对于根元素（html）的字体大小（font-size）来计算的长度单位。

比如：

html{font-size: 24px;}
body{font-size: 1.4rem;} /* 1.4 × 24px = 33.6px */

body下的字体就会默认为33.6px(1.4*24)

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
注意，em是相对浏览器的默认字体尺寸

这个单位与em有什么区别呢？

区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。