《vue3+TS+element-plus后端管理系统系列》之响应式设计
vue3-composition-admin 是⼀个管理端模板解决⽅案，它是基于vue3,ts和element-plus，项⽬都是以composition api风格编写。
演⽰地址：
github地址：
响应式设计
页⾯的设计与开发应当根据⽤户⾏为以及设备环境(系统平台、屏幕尺⼨、屏幕定向等)进⾏相应的响应和调整。具体的实践⽅式由多⽅⾯组成，包括弹性⽹格和布局、图⽚、CSS media query的使⽤等。
⽆论⽤户正在使⽤笔记本还是iPad，我们的页⾯都应该能够⾃动切换分辨率、图⽚尺⼨及相关脚本功能等，以适应不同设备；换句话说，页⾯应该有能⼒去⾃动响应⽤户的设备环境。
响应式⽹页设计就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
演⽰
我们以⾸页Panel Group 为例，展⽰下⾯效果：
这个案例运⽤了⼤部分响应式设计
步骤分析如下：vue element admin
1. 最初宽度⼤于 1200px 每个格⼦占6个栅格
2. ⼩于1200之后变成 12个栅格也就是50%
3. size 触发回调，到达⼀定值vuex响应，关闭sidebar
4. 媒体查询到达550px时，图标居中其他隐藏
引⽤代码：
响应式技术
栅格系统
不管是ant-design 还是element，UI组件库 在layout都会有栅格系统。基本上都是基于Bootstrap 的响应式设计。
不同UI组件库对于栅格划分定义不同，以element-plus为例：
element-plus 预设了五个响应尺⼨：xs、sm、md、lg 和 xl。
尺⼨解释
xs<768px 响应式栅格数或者栅格属性对象
sm≥768px 响应式栅格数或者栅格属性对象
md≥992px 响应式栅格数或者栅格属性对象
lg≥1200px 响应式栅格数或者栅格属性对象
xl≥1920px 响应式栅格数或者栅格属性对象
项⽬实例：
针对于卡⽚我们可以这样写
<el-col
:
xs="12"
:sm="12"
:lg="6"
class="card-panel-col"
>
</el-col>
也就是说当宽度⼤于1200px 6个栅格，⼩于1200px12个栅格。
媒体查询
css3 媒体查询更加完善，不管⽤什么UI框架媒体查询也是逃不掉的，可以做⼀些细节适配。具体使⽤不说了，查看⽂档即可：
1.
2.
3.
4.
sass 和 less 可以⽀持嵌套媒体查询，使⽤起来复⽤度更⾼
项⽬实例：
@media (max-width:550px){
.card-panel-description{
display: none;
}
.card-panel-icon-wrapper{
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
svg{
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
步骤解析：宽度为550px的时候，css样式发⽣改变，隐藏⾯板⽂字和icon居中
window 监听 resize变化
window提供⼀些监听媒体的⽅法和⼤⼩的⽅法，响应式需要动态触发需求的时候可以⽤到，如侧边栏开关。window有关响应式的API总结：
项⽬实例：
代码引⽤：
Window 监听resize变化调⽤回调函数
const addEventListenerOnResize=()=>{
window.addEventListener('resize', resizeHandler)
}
回调函数根据⼤⼩判断是否需要关闭侧边栏，使⽤Vuex通知
const resizeHandler=()=>{
if(!document.hidden){
store.dispatch(AppActionTypes.ACTION_TOGGLE_DEVICE,isMobile()? DeviceType.Mobile : DeviceType.Desktop) if(isMobile()){
store.dispatch(AppActionTypes.ACTION_CLOSE_SIDEBAR,true)
}
}
}
图⽚视频响应式
图⽚视频⽐较简单，基本遵守百分⽐布局，特殊适配⼀下就⾏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。