版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34672907/article/details/83065479
之前用的自适应都是用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)即可。