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 为例，展示下面效果：

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

步骤分析如下：

最初宽度大于 1200px 每个格子占6个栅格
小于1200之后变成 12个栅格也就是50%
window.resize 触发回调，到达一定值vuex响应，关闭sidebar
媒体查询到达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框架媒体查询也是逃不掉的，可以做一些细节适配。具体使用不说了，查看文档即可：

CSS3 @media 查询
响应式 Web 设计 - 媒体查询
Sass和媒体查询
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

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

vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
跟我学Springboot开发后端管理系统8：Matrxi-Web权限设计实现
上篇文章讲述了Matrix-web整体实现的权限控制的思路.现在来回顾一下: 首先,用户需要登录,填用户名.密码,后端接收到登录请求,进行用户.密码的校验,校验成功后则根据用户名生成Token,并返回 ...
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre）
Vue3官网-高级指南(十七)响应式计算computed和侦听watchEffect(onTrack.onTrigger.onInvalidate.副作用的刷新时机.watch .pre).渲染机制和 ...
基于vue3+ts+scss的后台管理系统(一)
创建项目 vite创建项目注意:vite需要Node.js版本>=12.0.0 安装方式(不使用模板): #使用 NPM: npm init vite@latest #yarn [推荐] ya ...
跟我学Springboot开发后端管理系统7：Matrxi-Web权限设计
Matrxi-Web权限设计对于一个后端系统来说,权限是基础设施,是安全保障.没有权限,系统可能随时面临各种风险,所以权限设计对后端系统来说至关重要.在Javaweb开发中,有很多权限开发的框架,比 ...
vue3.0初体验（例子解读reactive响应式）
目录准备 vue3 reactive原理例子重点讲解 vue3 reactive原理例子完整代码准备: 下载vue-next 安装依赖 npm install 核心部分package,里面的vue ...
用 Vite+Vue3+Ts 搭建通用后台管理系统
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cl ...
用vite+Vue3+ts搭建通用后台管理系统
点击上方关注前端技术江湖,一起学习,天天进步通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可 ...
基于vue3+ts+scss的后台管理系统(二)----excel的导入导出
excel的导入导出官网地址 https://docs.sheetjs.com/docs/getting-started/installation/standalone 安装XLSX插件:npm i ...

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

响应式设计

演示

响应式技术

栅格系统

媒体查询

window 监听 resize变化

图片视频响应式

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

最新文章

热门文章