Vue ；pc端使用 vw/vh 实现自定义布局

一、了解 vw/vh

vw/vh单位可以根据电脑浏览器自适应。

• vw —— 视口宽度的 1/100；

• vh —— 视口高度的 1/100

在 pc 端，视口宽高就是浏览器的宽高

1.1 vw/vh 定义

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

这里我们发现视窗宽高都是100vw／100vh，那么 vw 或者 vh，下简称 vw，很类似百分比单位。vw 和 %的区别为：

从对比中我们可以发现，vw单位与百分比类似，但却有区别，百分比单位的换算比较困难，这里的vw更像"理想的百分比单位"。

任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

1.2 vw 单位换算

如果要将px换算成vw单位，只要确定视图的窗口大小（布局视口），如果我们将布局视口设