vue适配移动端

一、使用postcss-px-to-viewport

1、下载 npm i postcss-px-to-viewport -S插件，可以把px转换成vw vh，做到适应每个设备。

2、在vue.config.js里面做配置：

module.exports = {

css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    require("postcss-px-to-viewport")({

                        unitToConvert: "px",    //需要转换的单位，默认为"px"

                        viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750

                        unitPrecision: 3,       //单位转换后保留的精度
                        viewportUnit: "vw",     // 希望使用的视口单位vw

                        fontViewportUnit: "vw",     //字体使用的视口单位vw

                        selectorBlackList: ['.ignore'], //需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。

                        minPixelValue: 1,       //设置最小的转换数值，如果为1的话，只有大于1的值会被转换

                        mediaQuery: false,      //媒体查询里的单位是否需要转换单位

                        exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配

                        landscape: false // 是否处理横屏情况

                    })

                ]

            }

        }

    },
}

注：

当使用框架里面的UI样式时，要是想更改框架样式不生效，写/deep/ 或者<<< 层级都不生效时，可以在vue.config.js中selectorBlackList里面添加类名修改。

selectorBlackList：需要忽略的选择器，可写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,wraps这样的类名的单位，都不会被转换。

3、最后配置完之后重新启动项目。

二、使用postcss-pxtorem插件

1）、下载npm install postcss-pxtorem --S 

2）、在src下新建一个config.js文件进行字体的适配设置

// 设置 rem 函数
function setRem () {
    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
    htmlDom.style.fontSize= htmlWidth / 20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem();
};

3）、在main.js文件引入config.js

4）、在pack.json里面添加postcss的设置

 "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "selectorBlackList": [
          ".nut-popup"
        ],
        "propList": [
          "*"
        ]
      }
    }
  },

selectorBlackList中设置的是除去nut-popup这个样式之外的，就是nut-popup这个样式单独设置。

5）、最后重新启动项目。