在页面中使用%和vw，基础实现响应式。完美屏幕适配。

在页面中使用%和vw、vh，基础实现响应式。

随着时间的推移，现在已是2019年的今天，你在写页面的时候，页面的宽度还在使用固定的宽高，在不同屏幕大小和不同浏览器的情况下是否也出现过乱码， 如何根据屏幕的大小和不同浏览器的情况来设定内容的宽高？ 你是否还在为以下问题担忧呢？

1. 页面内容超出窗口，出现滚动条。
2. 内容随着窗口的变化而变型。
3. 内容超出盒子模型的宽高，
4. 如果设置溢出隐藏，内容被裁剪。
5. 页面的宽度和高度不受控制和固定的宽高失真的效果。

认识%和vw

在W3C的规范，百分比的高度和宽度在设定时需要根据这个元素的父元素容器的高度。当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。
vh、vw：基于视口的尺寸，1vh = 1% viewportHeight , 1wh = 1% viewportWidth

结论

明显，如果使用rem，相当于使用了百分比布局。
在宽度方面，采用rem和百分比都是OK的，
高度方面，不建议采用rem，因为rem是以宽度为基准的。
当然如果将要适应的屏幕都是等比例放大的，比如2K屏幕，扩展到4K屏幕，那么高度也可以考虑用百分比。

1、无限增长：传统的HTML页面（类似淘宝这样的页面）
解决方案：100%和rem结合起来用。
页面整体布局时，页面容器的高度建议设置为100%，具体到某个元素的高度，他的高度可以通过rem设置。

2、单屏页面：页面高度和屏幕内容显示区域的高度相同（单页展示页面）
考虑用百分比来做宽、高，如果做高度时嫌麻烦，可以使用vw、vh做布局。

感受

使用vw+vh+rem的布局之外，可以再加上elementUI的栅格布局，可以轻松、快速的搭配出真正的响应式布局，但要注意浏览器的兼容性问题！