《vue3+TS+element-plus 后端管理系统系列》之响应式设计

vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。
 

• 演示地址：https://admin-tmpl.rencaiyoujia.com/
• github地址：https://github.com/rcyj-FED/vue3-composition-admin

 

响应式设计

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。
无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

演示

我们以首页Panel Group 为例，展示下面效果：

这个案例运用了大部分响应式设计

步骤分析如下：

1. 最初宽度大于 1200px 每个格子占6个栅格
2. 小于1200之后变成 12个栅格也就是50%
3. window.resize 触发回调，到达一定值vuex响应，关闭sidebar
4. 媒体查询到达550px时，图标居中其他隐藏

引用代码：Panel Group

 

响应式技术

---

栅格系统

不管是ant-design 还是element，UI组件库 在layout都会有栅格系统。基本上都是基于Bootstrap 的响应式设计。

Bootstrap 栅格系统：https://v3.bootcss.com/css/#grid

不同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. CSS3 @media 查询
2. 响应式 Web 设计 - 媒体查询
3. Sass和媒体查询
4. LESS @media内部作用域/扩展

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总结：

• EventTarget.addEventListener
• matchMedia

项目实例：

代码引用：resize.ts

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)
      }
    }
  }

 

图片视频响应式

---

图片视频比较简单，基本遵守百分比布局，特殊适配一下就行。

图片：https://www.runoob.com/css/css-rwd-images.html
视频：https://www.runoob.com/css/css-rwd-videos.html