移动端适配

1. rem适配

1.1 安装postcss-plugin-px2rem (推荐) ，也可使用官网的 postcss-pxtorem

npm i postcss-plugin-px2rem --save

1.2 postCss配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            // 换算基数， 默认100，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了。
            rootValue: 75,
            unitPrecision: 2, // 允许REM单位增长到的十进制数字。
            propWhiteList: [],  // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            propBlackList: [], // 黑名单
            // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            exclude: /(node_module)/,
            selectorBlackList: [], // 要忽略并保留为px的选择器
            ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ]
      },
      stylus: {
        'resolve url': true,
        'import': []
      }
    }
  }
}

1.3 设置rem基准值

npm i -S amfe-flexible

1.4 引入ren基准值

// main.js中
import 'amfe-flexible'

2. vw适配

2.1 安装postcss-plugin-px2rem

npm i postcss-px-to-viewport -D

2.2 在项目根目录下添加.postcssrc.js文件

const path = require('path')
 
module.exports = ({ webpack }) => {
  const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750
 
  return {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'ff > 31',
          'ie >= 8'
        ]
      },
      'postcss-px-to-viewport': {
        unitToConvert: 'px', // 要转化的单位
        viewportWidth: 375, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        exclude: [], // 设置忽略文件，用正则做目录名匹配
        landscape: true, // 是否处理横屏情况
        landscapeUnit:'vw', // 横屏时使用的单位
        landscapeWidth: 750 // 横屏时使用的视口宽度
      }
    }
  }
}

2.3 参考文章

移动端布局之postcss-px-to-viewport