自适应问题的处理

之前用的自适应都是用rem或者em。最近觉得另一种方法不错，分享一下最近用vh和vw的用法。

vh官方给的解释是:    相对于视口的高度，视口被均分为100单位的vh。

vh官方给的解释是:    相对于视口的宽度。视口被均分为100单位的vw。

看起来这个可以做些什么，又好像不是什么都可以做，毕竟百分比也可以达到一样的效果对吧。但是就是这个觉得鸡肋的东西让我最近觉得做自适应不错。声明一点，需要兼容IE8的话需要百度（网上有各种处理方法），毕竟这两家伙都是兼容IE9+滴。

补充说明一下，用vh和vw写css需要运用calc()进行运算。

下面开始正式demo。

body,html{
    width:100%;
    height:100%;
}

.div{
    width: calc(100/5760*1932vw);
    height: calc(100/2160*1428vh);
}

以上就是自适应的写法，上面的写法针对的是设计稿是5760*2160的分辨率,如果设计师给的设计稿是1920*1080的话写法就是以下：

.big_circle{
    width: calc(100/1920*132vw);
    height: calc(100/1080*148vh);
}

这个自适应布局只适用于css的布局。

最后说一下原理，首先窗口都是分成100分的，100/1920就是1920的每个像素等于多少个vw，设计稿给的132像素，只需进行一下运算 cacl(100/1920*132vw)即可。