素质N连
既然已经有了percentage值，为什么还要用基于视口单位呢？
因为，如果你想根据视口来调整某个元素的大小，采用percentage计算，那么得每一层父元素都使用percentage计数。但如果用基于视口单位，就省去了很多麻烦！
为什么不可以用js获取窗口大小，然后做css？
可以是可以，但是这颇有css-in-js的味道。我个人来说，不喜欢这种。并且在加载上不太符合浏览器的加载方式。我曾经尝试过把css写在js中，但是出现一个问题就是，频繁卡顿。
js是动态获取viewport大小，而css只是在加载时候渲染，是不是js灵活性更高？
非也非也。你可以用我下面给的示例试一试。怎么拖动viewport，小方块都是在屏幕中间。恰恰相反，你动态获取的viewport大小只是在加载的时候渲染，而基于viewport单位却是真正动态的。
基本概念
如果想要一个元素的宽度为可视区域的50%，那么可以用50vw来表示。
- vw 可视区域宽度（viewport width），总宽度100vw；
- vh 可视区域高度（viewport height），总高度100vh；
- vmin 比较可视区域宽度和高度，取小；
- vmax 比较…，取大；
- rem 相对于html的font-size 只要设置了html的font-size，其他单位就可以用rem
- ch 一个相对于0的大小 1ch=1英文=1数字=0.5汉字
示例
做一个长宽均为140px的方块相对于屏幕居中。
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: 14px;
}
.box{
width:10rem;
/*140px*/
height: 10rem;
margin-top: calc(50vh - 5rem);
margin-left: calc(50vw - 5rem);
background-color: pink;
}
</style>
<body>
<div class='box'>
</div>注意：ch单位和font-family、浏览器等有一定的关系，经过测试，有的字体，如微软雅黑在chrome浏览器上，输入6ch显示3个半汉字…但是使用宋体和cursive在Chrome上都正常。然而cursive在Firefox上却显示3个半汉字。
希望大家在使用的时候，能精心调试
挚谢阅读。