视口单位vw、vh

viewport为视图窗口
vw：相对于viewport的宽度百分比；
vh：相对于viewport的高度百分比
vw、vh不会由于根元素、元素及父元素的大小改变，只与viewport有关
视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。
例：

//css部分
html,*,body,div{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .one{
                width: 100vw;
                font-size: 5vw;
                background-color: red;
                margin: 0 auto;
            }
            .two{
                width: 80vw;
                font-size: 5vw;
                background-color: orange;
                margin: 0 auto;
            }
            .three{
                width: 50vw;
                font-size: 3vw;
                background-color: cyan;
                margin: 0 auto;
            }

css设置one类元素宽为100%，文字为5%；two类元素宽为100%，文字为5%，three类元素宽为100%，文字为3%。

//html 部分
这是宽为100%，文字为5%的
这是宽为80%，文字为5%的
这是宽为50%，文字为3%的

如图：

150484B3CBA1DAAB0FDEC3359F98D283.png

由one、two比较可以看出，文字的大小百分比与元素本身的宽没有关联。