ruoyi 管理后台使用bootstrap框架,可以自动使用pc端口和移动端,本章节介绍一下如何实现双端适配
1、移动端操作效果
二、ruoyi使用Bootstrap v3.3.7,该前端框架自动适配pc和移动端
样式引入如下:
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>三、什么是移动适配?怎样可以实现移动适配呢?
1.移动适配就是指在不同尺寸的设备当中,网页元素的尺寸随着视口大小而等比缩放。
2.从前项目中大多使用rem单位设置网页元素的尺寸,现在新技术采用vw/vh来设置尺寸。
那么为什么不能用像素单位或百分比布局呢?
答:因为像素单位是绝对单位,不能变化,而百分比布局是宽度自适应,高度固定,这两种方法都不能很好地适应移动端设备的变化。
四、rem
1.什么是rem?
rem单位是相对于HTML标签的字号(根字号)来计算结果的,1rem=1HTML根字号,即,必须在有HTML字号的情况下才能设置rem单位。
目前rem布局中,将网页宽度等分成10份,HTML标签字号大小为视口宽度的1/10。
2.换算
rem单位尺寸=px单位数值/基准根字号
3.工具
使用flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放的效果。
(flexible.js是手机淘宝开发出来的一个用来适配移动端的js框架,核心原理是根据不同的视口宽度给网页中HTML根节点设置不同的字号。)
五、vw/vh
1.vw/vh是什么?
vw : (viewport width)
vh : (viewport height)
vw/vh是相对单位,是相对于视口的尺寸计算结果。
2.换算
1vw=1/100视口宽度 1vh=1/100视口高度
未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表