vue实现移动端适配方案
转载自原文地址:https://huaweicloud.csdn.net/638ee032dacf622b8df8d4f0.html
vue实现移动端适配步骤如下:
先安装amfe-flexible
和postcss-pxtorem
:
npm install amfe-flexible --save
npm install postcss-pxtorem --save
在main.js
导入amfe-flexible
import 'amfe-flexible';
module.exports = {
//...其他配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
},
sass: {
// 配置scss文件全局变量,没有分号会报错
data: `@import "@ui/common.scss";` // 旧版sass-loader写法(8.0以下)
// prependData: `@import "@ui/common.scss";` // 新版scss-loader(8.0及以上)
}
}
},
}
在.postcssrc.js
或postcss.config.js
中配置如下:
module.exports = {
"plugins": {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
rootValue
根据设计稿宽度除以10
进行设置,这边假设设计稿为375
,即rootValue
设为37.5
;propList
是设置需要转换的属性,这边*
为所有都进行转换。
测试结果:
css中设置某类宽度为375px
:
.content{
width:375px;
}
运行后在浏览器可以发现已经转化为10rem
,即375/设置的rootValue
:
以上情况则说明
postcss-pxtorem
配置成功
html
的字体大小跟随设备宽度进行改变,body
跟随设备的dpr
进行改变,这是amfe-flexible
的实现,即说明配置成功。
说明,安装过程中可能会遇到以下报错:
-
安装配置后,发现
rem
并没有生效,解决办法:使用vue.config.js
去配置,不要用postcss.config.js
-
抛错
[object Object] is not a PostCSS plugin
。报错原因:postcss-pxtorem
版本太高,更改版本为5.1.1
。npm install postcss-pxtorem@5.1.1
完结。