vue的自定义布局（vm/vh）

目录

1. px与视口
2. %
3. 媒体查询
4. rem
5. vm/vh

1. vw/vh的定义

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

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

从对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这里的vw更像"理想的百分比单位"。

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

2. vw单位换算

如果要将px换算成vw单位，只要确定视图的窗口大小（布局视口），如果我们将布局视口设置成分辨率大小。
比如对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成vw：

  1px = （1/375）*100 vw

此外，也可以通过postcss的相应插件，预处理css做一个自动的转换，postcss-px-to-viewport可以自动将px转化成vw。 postcss-px-to-viewport的默认参数为：

var defaults = {
   
  viewportWidth: 320,
  viewportHeight: 568, 
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [