响应式布局
订阅
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
展开全文

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
信息
- 优 点
- 面对不同分辨率设备灵活性强等
- 提出时间
- 2010年5月
- 英 文
- Responsive layout
- 中文名
- 响应式布局
- 目 的
- 解决移动互联网浏览
- 解 释
- 一个网站能够兼容多个终端
响应式布局优点和缺点
优点:
[1]
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:
[1]
兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
-
响应式布局
2015-03-01 10:48:57响应式布局 -
ElementUI响应式布局bug、其中中el-col-sm-0会导致响应式布局失效得解决方法
2020-09-05 22:57:26下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col> <el-col :xs="0...如下布局,如果将
:sm="0"
则会导致456始终不显示
下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug<el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col> <el-col :xs="0" :sm="0" :md="7" :lg="5" :xl="4" >456</el-col>
完整得例子
新建一个
demo.html
文件内容如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试页面</title> <!-- cdn引入ElementUI样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> * { margin: 0; padding: 0; } .myclass1 { height: 200px; background-color: slategray; } .myclass2 { height: 200px; background-color: #867090; } </style> </head> <body> <div id="app"> <el-row> <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col> <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" class="myclass2" >456</el-col> </el-row> </div> <!--cdn引入ElementUI组件必须先引入Vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- cdn引入ElementUI组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script type="text/javascript"> const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#app', // element: 指定用vue来管理页面中的哪个标签区域 data: { screenWidth: 992 }, }) </script> </body> </html>
会发现456不会显示,虽然宽度有了但是内容456却不显示
将sm得值设置非0则正常,但是屏幕宽度为sm时会导致456被挤下去如下
解决方法,通过vue得
v-if
或者v-show
首先、将sm不要设置为0,例如设置为1
其次、为了解决这个sm=1的问题,通过js获取屏幕宽度,当屏幕<992时就不显示即可
当屏幕小于992px时将其隐藏掉
<el-row> <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col> <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" class="myclass2" v-show="screenWidth >= 992">456</el-col> </el-row>
以及通过vue获取屏幕宽度
const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#app', // element: 指定用vue来管理页面中的哪个标签区域 data: { screenWidth: 992 }, mounted(){ const that = this window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() } } })
效果
收藏数
14,845
精华内容
5,938