-
第一种方法:我们可以将写的rem的js直接写在public文件夹下的index.html文件的头部,记得要加移动端头部的meta标签
-
第二种方法:就是将rem的js放在public文件夹下创建一个,在main.js中引入,也可以使用
-
-
下载插件进行配置就可以了
cnpm install amfe-flexible -S
cnpm install postcss-pxtorem -D
//移动端rem适配
import 'amfe-flexible/index'
-
记得移动端页面要在index.html中加入meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-
在项目的根目录下创建一个vue.config.js文件
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 75, // 换算的基数(设计图750的根字体为75)
// selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ['*']//*代表将项目中的全部进行转换,单个转换如width、height等
})
]
}
}
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
-
在重新启动项目就可以了,在项目中直接写px就可以,会自动的将px转换为rem的
网友评论