当前位置:网站首页>移动端适配方案
移动端适配方案
2022-06-13 05:42:00 【霹雳桃】
移动端适应性布局
- 使用 rem 尺寸单位来实现
方案一
1.使用 less 配置,引入 lib-flexible 插件,或者自己获取 设备宽度计算
使用 less 自己配置
- 统一样式通过变量实现
- 统一共有样式抽离通过 mixin 混入实现
自己配置 js 文件,计算 rem 的值
- 在 index.html 中配置,设置根元素字体大小
// 设置 minimum-scale=1,maximum-scale=1 设置初始倍数 // 配置是否允许用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scaleable=no" />
// 将根元素字体大小和屏幕做绑定
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 10 + "px";
// 屏幕改变重设根元素字体大小
window.addEventListener("resize", () => {
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 10 + "px";
});
less 配置
- 引入文件 index.less mixin.less variable.less 设置 rem 大小
方案二
使用 lib-flexible 插件
- 1.安装
npm i lib-flexible -S
- 2.首先要引入到 main.js 中
import "lib-flexible"
- 3.使用 flexible 所有单位要用 rem
webpack 帮助我们实现 px 转 rem 的库,,叫做 px2rem
- 1.安装
npm install px2rem
npm install px2rem-loader
- 2.插件配置
- 在 vue.config.js s中配置
chainWebpack: (config) => {
config.module
.rule("less") // css 规则
.oneOf("vue")
.use("px2rem-loader")
.loader("px2rem-loader")
.before("postcss-loader") // this makes it work.
.options({
remUnit: 37.5, // 设计 分辨率尺寸
remPrecision: 8, // rem 小数保留几位
}) // remUnit: 192代表以1920px为整体,如果设计稿的尺寸是750px,这里的值为75
.end();
},
3.使用
- 如果哪一个样式的 px 不需要转换 rem 的话,就在后面加上
/*no*/
.text { width: 300px; height: 300px; /*no*/ }
- 如果哪一个样式的 px 不需要转换 rem 的话,就在后面加上
对比 mixin 和 px2rem 实现 rem 的转换
实现原理 都是 px/baseSize + ‘rem’
mixin 需要的才去写
px2rem 全部转化不需要的自己加 /no/
边栏推荐
- Solution to prompt "permission is required to perform this operation" (file cannot be deleted) when win10 deletes a file
- About Evaluation Metrics
- Byte buddy print execution time and method link tracking
- Calculate the number of days between two times (supports cross month and cross year)
- Etcd understanding of microservice architecture
- 2021-9-19
- Windbos common CMD (DOS) command set
- Case - grade sorting - TreeSet set storage
- 890. Find and Replace Pattern
- Parallelgateway and exclusivegateway of 14 gateways
猜你喜欢
2021.9.30学习日志-postman
SQL table columns and statements of database
Customer information management system - C language
Case - recursive factorial (recursive)
AUTOSAR实战教程pdf版
Browser screenshot method (long screenshot, node screenshot, designated area screenshot)
Case - random numbers without repetition (HashSet and TreeSet)
Case - the ArrayList collection stores student objects and traverses them in three ways
Solutions to conflicts between xampp and VMware port 443
Mongodb multi field aggregation group by
随机推荐
MySQL log management and master-slave replication
Byte buddy print execution time and method link tracking
About Evaluation Metrics
About the solution of pychart that cannot be opened by double clicking
Introduction to R language 4--- R language process control
使用cmake交叉編譯helloworld
About anonymous inner classes
Case - the ArrayList collection stores student objects and traverses them in three ways
High availability of Nacos series
powershell优化之一:提示符美化
15 inclusivegateway and eventgateway of flowable gateway
MySQL installation, architecture and management
20 flowable container (event sub process, things, sub process, pool and pool)
OpenGL Mosaic (8)
2021.9.29学习日志-Restful架构
动态规划-最长公共子串
顶部下滑沉浸式dialog
Metaltc4.0 stable release
MySQL basic query
MySQL installation in Linux Environment