先抄一下網(wǎng)上對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。

開發(fā)準(zhǔn)備：

1.首先確認(rèn)大屏尺寸，比如：3000x1500；

2.確認(rèn)尺寸之后就可以在全局css文件globel.scss中，設(shè)置兩個變量：$w和$h

$w: 100/3000

$h: 100/1500

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

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

4.要給某div設(shè)置寬度和高度

根據(jù)設(shè)計圖效果，比如設(shè)計圖上該div寬高：300x200

5.設(shè)置如下樣式：

width:$w*300vw；

height:$h*200vh;

6.其他所有樣式均以此類推；可適應(yīng)不同分辨率大小的屏幕。