项目笔记整理04-vue-cli4.0移动端适配*3

vue-cli4.0移动端适配*3

1.第一/二种方案(常用)——px转rem适配方案

使用px转成rem：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备。

（1）第一步：

yarn add lib-flexible 或者 npm install lib-flexible(公共)

在main.js引入中：import 'lib-flexible/flexible.js'

（2.1）第二步第一种方法：安装postcss-px2rem

yarn add postcss-loader postcss-px2rem
npm install --save-dev postcss-loader postcss-px2rem(推荐此方案)
然后在配置文件中配置，(我是在根目录新建 vue.config.js并在其中配置的，也可在package.json中配置)

 module.exports = {
   
    css: {
   
        loaderOptions: {
   
            css: {
   
                // options here will be passed to css-loader
            },
            postcss: {
   
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
   
                    remUnit: 75
                })]
            }
        }
    }
}

（2.2）第二步第二种方法：安装postcss-pxtorem

yarn add postcss-pxtorem 或 npm install postcss-pxtorem -