vw知识小心得

vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

这边顺便提一下vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个

兼容性方面是vw和vh的短板了，如下图所示，使用vw和vh所需求的版本还是较高的

废话不多说，简单粗暴上代码，简单demo，拿走拿走，嘿嘿

sass中只需要使用这个函数做转换即可

//以iphone7尺寸@2x 750像素宽的视觉稿为例

@function vw($px) {

    @return ($px / 750) * 100vw;

}

//假设一个div元素在视觉稿中，宽度为120px，字体大小为12px

div {

    width: vw(120);

    font-size: vw(12);

}

基于vue下vw的使用，点击下载小demo