vue@cli3.0移动端H5适配方案

vue@cli3移动端H5 页面适配

一、lib-flexible (淘宝弹性布局方案)

lib-flexible会自动在index.html里添加带有的标签，需要删除之前原来带有name=“viewport” 的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。

假如设计稿的宽度是375px，此时的1rem应该等于37.5px

假如设计稿的宽度是750px，此时的1rem应该等于75px

二、postcss-px2rem

postcss-px2rem会将代码中的px转化为rem

三、使用方法

1. 安装 flexible 和 postcss-px2rem

   npm install lib-flexible --save
   npm install postcss-px2rem --save
   或
   yarn add lib-flexible --save
   yanr add postcss-px2rem --save
   

2. 在项目入口文件导入 lib-flexible

   import 'lib-flexible'
   

3. 配置 postcss-px2rem

   修改vue.config.js的配置,设置1rem转换为多少px

   module.exports = {
       css: {
           loaderOptions: {
               css: {},
               postcss: {
                   plugins: [
                       require('postcss-px2rem')({
                           remUnit: 37.5
                       })
                   ]
               }
           }
       }
   }