vue项目适配移动端 配置步骤

vue项目适配移动端 配置步骤

1.使用插件pxtorem把px转化为rem
安装： npm install lib-flexible
2.在main.js中引入 import ‘lib-flexible/flexible.js’
3.安装插件 npm install postcss=pxtorem
4，在package.json中添加以下配置

"postcss": {
   "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
           "rootValue": 75, // 设计稿宽度的1/10（注： package.json中不允许添加注释）
           "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
},

5，使用postcss-px-to-viewport
安装插件 npm install postcss-px-to-viewport
在package.json中添加以下配置：

"postcss": {
    "plugins": {
    "autoprefixer": {},
    "postcss-px-to-viewport": {
         "viewportWidth": 750,
         "minPixelValue": 1
        }
    }
}

配置完成，新建一个div 设置宽高200px，加背景色，在浏览器中模拟不同手机下的显示情况，即可看出已适配移动端。_陶