通过vh和vw适配大屏项目和不同分辨率浏览器

先抄一下网上对vh和vw的解释：

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

开发准备：

1.首先确认大屏尺寸，比如：3000x1500；

2.确认尺寸之后就可以在全局css文件globel.scss中，设置两个变量：$w和$h

$w: 100/3000

$h: 100/1500

3.需要引用该变量的css文件中引入全局css文件；

@import "@common/css/globel.scss";

4.要给某div设置宽度和高度

根据设计图效果，比如设计图上该div宽高：300x200

5.设置如下样式：

width:$w*300vw；

height:$h*200vh;

6.其他所有样式均以此类推；可适应不同分辨率大小的屏幕。