如何让Vue实现移动端适配

    我们在纯静态网页中使用js来适配各种移动端的方法之前的文章已经讲过了，由于vue有更牛逼的插件，所以我们这里选择使用插件来适配移动端。

    首先，我们安装两个插件postcss-pxtorem和lib-flexible，postcss-pxtorem会把px自动转化为rem，而lib-flexible会自动调整html的font-size。

    npm install amfe-flexible -S
    npm install postcss-pxtorem -D

    然后，我们在main.js中引入amfe-flexible。

    import ‘amfe-flexible’

    比较特殊的是postcss-pxtorem不用引入，我们需要根目录下创建一个新的文件，名为postcss.config.js，内容为：

    module.exports={
        　　plugins:{
        　　　　'postcss-pxtorem':{
        　　　　　　rootValue:75,//设计图的1/10
        　　　　　　propList:['*'],//设定转化为rem的css属性
        　　　　　　selectorBlackList:['van','weui','mu'] // 忽略转换正则匹配项
        　　　　}
        　　}
        }

    配置完这些后，我们就能按照px的方法正常使用了，插件会自动计算rem。看个例子。

    这边创建一个宽高为750*300px 的背景为红色字体为黄色的块元素。

    页面中可以看到自动转为了rem。