postCss 适配 https://www.jianshu.com/p/cedf82c362dc

• 一.移动端适配
• 二.PC 端适配

一.移动端适配

1. 先安装依赖 autoprefixer postcss-pxtorem lib-flexible

2. main.js 引入

   import "lib-flexible/flexible.js";

3. 在 vue.config.js

   const AutoPrefixer = require('autoprefixer')
   const PxToRem = require('postcss-pxtorem')
   module.exports = {
     css: {
       loaderOptions: {
         css: {
           test: /\.css$/,
           use: ['style-loader', 'css-loader', 'postcss-loader'],
           localIdentName: '[name]-[hash]',
           camelCase: 'only'
         },
         postcss: {
           plugins: [
             AutoPrefixer(),
             PxToRem({
               rootValue: 75, // 750px 分辨率设计稿
               propList: ['*', '!border', '!border-radius'],
               selectorBlackList: ['van'] // 前端组件库样式不转换
             })
           ]
         }
       }
     }
   }
   

二.PC 端适配

1. 安装 postcss-pxtoremm' autoprefixer

2. 添加 rem.js ，并在 main.js 中引入

   // 设置 rem 函数
   function setRem() {
     //  PC端
   
     // 基准大小
     const baseSize = 100
     const basePc = baseSize / 1920 // 表示1920的设计图,使用100PX的默认值
     let vW = window.innerWidth // 当前窗口的宽度
     const vH = window.innerHeight // 当前窗口的高度
     // 非正常屏幕下的尺寸换算
     const dueH = (vW * 1080) / 1920  //这边1080可以 去掉地址栏高度取 设计稿取 1920 * 937
     if (vH < dueH) {
       // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
       vW = (vH * 1920) / 1080
     }
     const rem = vW * basePc // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
     document.documentElement.style.fontSize = rem + 'Px'
   }
   // 初始化
   setRem()
   // 改变窗口大小时重新设置 rem
   window.onresize = function() {
     setRem()
   }
   

3. 在 vue.config.js

   const PxToRem = require('postcss-pxtorem')
   const AutoPrefixer = require('autoprefixer')
   
    css: {
      loaderOptions: {
        css: {
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader'],
          localIdentName: '[name]-[hash]',
          camelCase: 'only'
        },
        postcss: {
          plugins: [
            AutoPrefixer(),
            PxToRem({
              rootValue: 100, // 750px 分辨率设计稿
              propList: ['*', '!border', '!border-radius'],
              selectorBlackList: ['van'] // 前端组件库样式不转换
            })
          ]
        },
      }