pc端网页屏幕自适应适配方案(rem)
# 1、安装插件
npm i lib-flexible --save
npm i postcss-px2rem --save -dev
1
2
2
# 2、引入lib-flexible
在 main.js 文件中
import 'lib-flexible'
1
# 3、删除meta标记
位置:public/index.html 中的
# 4、修改文件
位置: lib-flexible/flexible.js(node_modules)
将屏幕最大宽度改为设备宽度*dpr
# 5、配置postcss-px2rem
vue.config.js里的css预处理中的postcss插件里
css: {
loaderOptions: {
postcss: {
plugins: [
//remUnit 通常我们是根据设计图宽度十分之一来定这个值
//假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
require('postcss-px2rem')({
remUnit: 80
})
]
}
},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
或者新建postcss.config.js文件
module.exports = {
plugins: [
require('postcss-px2rem')({
remUnit: 80
})
]
}
1
2
3
4
5
6
7
2
3
4
5
6
7
相关资料 dpr是设备像素和与css像素的比例 iPhone8设备像素为750px1354px 当dpr为2时,css像素为375px*677px
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13