element如何实现响应式布局

2024-10-31 07:31:31

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

element如何实现响应式布局

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

element如何实现响应式布局

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

element如何实现响应式布局

7、再给el-col标签添加属性:md,大于等于992px(宽度)

element如何实现响应式布局

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

element如何实现响应式布局
猜你喜欢