vue/cli 脚手架之移动端适配解决方案

vue/cli 3.X配置postcss.config.js 解决移动端适配问题

1. 简述

postcss：是一个利用JS插件来对CSS进行转换的工具

• 拥有极高的处理性能
• 可以正常使用css,也可以使用less或sass
• 对Source Map支持更好
• 插件便利

2. 实用的插件

1. autoprefixer 是PostCSS自动管理浏览器前缀的插件。
2. postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法，如css4（可以理解为css中的Babel）
3. postcss-sprites 自动制作雪碧图，不用手动拼接
4. cssnano 压缩css代码(如果你是用webpack的话，css-loader集成了cssnano，你不需要再次引入)
5. postcss-hash-classname 把转换后的css文件名附上哈希值
6. pixrem 将rem转换为px
7. postcss-px-to-viewport 将px转换为vh和vw（推荐作为移动端的计量单位，而不是rem）
8. postcss-pxtorem 将px转换为rem

3. px 转 rem 示例

这里使用postcss-pxtorem 将px转换成rem 的插件

module.exports = () => ({
  plugins: [
    require('autoprefixer')(),
    // require('postcss-px2rem')({ remUnit: 75 })
    require('postcss-pxtorem')({
      rootValue: 37.5,
      propList: ['*']
    })
  ]
});

4. px 转 vw 示例

这里用到了 postcss-px-to-viewport，将px单位自动转换成viewport单位

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      // viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    'postcss-viewport-units': {
      // 排除会产生警告的部份
      filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
    },
    cssnano: {
      preset: 'advanced',
      autoprefixer: false, // 和autoprefixer同样具有autoprefixer，保留一个
      'postcss-zindex': false
    }
  }
 }

5. 参考

• 参考blog.csdn.net/jensen_yao/…