vue做移动端自适应插件实现rem

本文主要是介绍vue做移动端自适应插件实现rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.实现方式

postcss-pxtorem：将px转换为rem

amfe-flexible：为html、body提那家font-size，窗口调整的时候重新设置font-size

2.安装与使用 

npm install amfe-flexible --save

npm install postcss-pxtorem --save-dev

 1.再main.js入口文件引入

// 引入amfe-flexible 根据窗口调整html-font-size大小

import 'amfe-flexible'

2.创建postcss.config.js配置文件

module.exports = {plugins: {autoprefixer: {},// flexible配置"postcss-pxtorem": {"rootValue": 75, //设计稿宽度的1/10"mediaQuery": false, // 禁止转换媒体查询中的像素值"propList": ["*"] //需要做转化处理的属性，如`hight`、`width`、`margin`、`*`表示全部}}}

注意点：
（1）rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为370，即rootValue设为37.5；

（2）propList是设置需要转换的属性，这边*为所有都进行转换。

如果出现报错，降低版本

"dependencies":{

        "amfe-flexible"："^2.2.1",
        "postcss-pxtorem"："^5.1.1",

}

这篇关于vue做移动端自适应插件实现rem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---