em 单位

相对于父级元素的font-size计算而来

本级元素字体大小（单位为px）=父级元素的字体大小（转化为px） * 本级元素em的值

例如：

父级元素：20px，

子级元素的1em相当于20px

若父级元素的单位也是em，则一层层往上找，直到找到单位为px的元素。

例如：

父级元素的font-size为0.8em，父级元素的上一级元素的font-size为20px

则父级元素的font-size为0.8*20=16px。

则子级元素的1em相当于16px

因为这个特性，多级嵌套的元素若是其中几层的单位时em，元素的字体大小计算就会容易出错

<html lang="en">
<head>
    <style>
        #div1 {
            font-size: 20px;
        }

        #div2 {
            font-size: 0.8em;
        }

        #div3 {
            font-size: 2em;
        }

        #div4 {
            font-size: 2em;
        }

        #div5 {
            font-size: 0.8em;
        }
    </style>
</head>
<body>
<div id="div1">
    <!--(font-size为20px)-->
    AAAAAAAAAA

    <div id="div2">
        <!--(font-size为20*0.8=16px)-->
        BBBBBBBBBB
        <div id="div3">
            <!--(font-size为16*2=32px)-->
            CCCCCCCCCC
            <div id="div4">
                <!--(font-size为32*2=64px)-->
                DDDDDDDDDD
                <div id="div5">
                    <!--(font-size为64*0.8=51.2px)-->
                    EEEEEEEEEE
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

rem单位

相对于html根元素的font-size计算而来

因为所有单位是rem单位的元素的基础值都是同一个，所以计算比较方便，也不会出现em单位的那种嵌套问题

响应式页面使用
因为em取决于html根元素的font-size大小

只需要重新设置html的font-size大小，所有单位为em的元素都会自动缩放或者放大

所以rem单位非常适合响应式页面使用

@media 媒体查询

可以根据不同 宽度 设置不同字号 实现rem

    @media (width:500px) {
      html{
        font-size: 32px;
      }
    }

    如果 windth 是 500px 就执行 大括号里面的内容

flexible.js

github地址：https://github.com/amfe/lib-flexible

<script src="<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>"

flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案，也就是说它可以让你在不同的终端设备中实现页面适配。

vmin、vmax

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

vw  vh

使用vw/vh布局，可以实现视口宽度不同，网页元素宽高等比缩放效果，比rem的优势在于，在代码中直接写vw/vh就能实现移动适配效果，不用引入js文件，比rem更简单，但有兼容问题，目前大厂已经转型到了vw。

vw/vh是相对单位，vw相对视口的宽度，vh相对视口的高度。
1vw = 1/100的视口宽度，1vh = 1/100的视口高度。
比如iphone6/7/8的视口宽是375，换算成vw就是3.75。

但实际开发中用vw最多，因为vh是相对视口高度计算尺寸的，一般我们都是相对的视口宽，而且使用vh需要考虑全面屏，视口高度尺寸会偏大。

// 设计稿是参考的375视口宽
@vw:3.75vw;
.nav {
    width:(69 / @vw);
    height:(15 / @vw);
    background-color:yellow;
}