当前位置:网站首页>移动端适配方案
移动端适配方案
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/
边栏推荐
- @Detailed explanation of propertysource usage method and operation principle mechanism
- MongoDB 多字段聚合Group by
- Case - traversing the directory (file class & recursive call)
- 2021.9.29 learning log MIME type
- How to Algorithm Evaluation Methods
- Case - simulated landlords (upgraded version)
- Introduction to R language 4--- R language process control
- Byte buddy print execution time and method link tracking
- MySQL main query and sub query
- powershell优化之一:提示符美化
猜你喜欢
Etcd understanding of microservice architecture
19 calling subprocess (callactivity) of a flowable task
Problems encountered in the use of PgSQL
安装harbor(在线|离线)
Getclassloader() returns null, getclassloader() gets null
Django uses redis to store sessions starting from 0
Small project - household income and expenditure software (1)
Vagrant virtual machine installation, disk expansion and LAN access tutorial
Mongodb Multi - field Aggregation group by
ZABBIX wechat alarm
随机推荐
MySQL advanced query
Etcd understanding of microservice architecture
powershell优化之一:提示符美化
Mysql database crud operation
MySQL performs an inner join on query. The query result is incorrect because the associated fields have different field types.
mongo
C calls the API and parses the returned JSON string
OpenGL mosaic (VIII)
Basic operations of MySQL auto correlation query
Use the browser to cut the entire page (take chrome as an example)
Integer tips
Detailed explanation of R language sparse matrix
MySQL installation in Linux Environment
About Evaluation Metrics
安装harbor(在线|离线)
Case - traversing the directory (file class & recursive call)
High availability of Nacos series
Some methods of string
How to Algorithm Evaluation Methods
Install harbor (online offline)