几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
element如何实现响应式布局
来源：互联网
2023-03-17 00:01:30 版权归原作者所有，如有侵权，请联系我们
响应式布局，是能够兼容多个终端（主要是PC端和移动端），达到页面自适应效果。最初，是在Bootstrap中完美体现。随著Vue.js框架兴起，对应的UI框架Element，也做到了响应式布局。
工具/原料
- Vue.js
- ElementUI
- HBuilderX
- HTML5
- 截图根据
- 浏览器
- 台式机
方法/步骤
打开HBuilder工具，创建一个vue项目，并在指定文件目录下，创建vue文件
利用ElementUI进行页面布局，并设置div标签的样式属性
保存代码并打开浏览器，预览页面，使用手机模拟器模式查看
再切换到PC模式，可以发现变为垂直模式了
接着，给el-col添加:sm，分辨率大于等于768px条件下
结果再次保存代码并进行预览，可以发现在PC端，横向展示
再给el-col标签添加属性:md，大于等于992px（宽度）
使用相同的方法，给标签加上lg，最小宽度大于等于1200px
保存代码并进行预览，可以发现元素内容各个部分占的比例不一样
最后再添加一个:xl属性，大于等于1920px，然后预览效果
总结
1、xs，小于768px
2、sm，大于等于768px
3、md，大于等于992px
4、lg，大于等于1200px
5、xl，大于等于1920px
注意事项
- 注意element如何实现响应式布局
- 注意Element中常用组件的用法
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT
上一篇：如何修改迅雷的界面 下一篇：js添加背景图片教程
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 256 JAVASCRIPT
- 详细阅读