响应式布局，是能够兼容多个终端（主要是PC端和移动端），达到页面自适应效果。最初，是在Bootstrap中完美体现。随著Vue.js框架兴起，对应的UI框架Element，也做到了响应式布局。工具/原料moreVue.jsElementUIHBuilderXHTML5截图根据浏览器台式机方法/步骤1/10分步阅读

打开HBuilder工具，创建一个vue项目，并在指定文件目录下，创建vue文件

2/10

利用ElementUI进行页面布局，并设置div标签的样式属性

3/10

保存代码并打开浏览器，预览页面，使用手机模拟器模式查看

4/10

再切换到PC模式，可以发现变为垂直模式了

5/10

接着，给el-col添加:sm，分辨率大于等于768px条件下

6/10

结果再次保存代码并进行预览，可以发现在PC端，横向展示

7/10

再给el-col标签添加属性:md，大于等于992px（宽度）

8/10

使用相同的方法，给标签加上lg，最小宽度大于等于1200px

9/10

保存代码并进行预览，可以发现元素内容各个部分占的比例不一样

10/10

最后再添加一个:xl属性，大于等于1920px，然后预览效果

总结

1、xs，小于768px

2、sm，大于等于768px

3、md，大于等于992px

4、lg，大于等于1200px

5、xl，大于等于1920px

注意事项

注意element如何实现响应式布局

注意Element中常用组件的用法

响应式布局ELEMENTHTML5JAVASCRIPT