关于vue-cli3:PC端只对指定页面做自适应vuepostcsspxtorem

一、postcss-pxtorem装置

npm install -S postcss-pxtorem

二、rem 配置

##  rem.js
function setRem() {
  `// 基准大小
  const baseSize = 100;
  const baseScale = baseSize / 1920; // 1920的设计图
  let widthScale = window.innerWidth; // 以后窗口的宽度
  const heightScale = window.innerHeight; // 以后窗口的高度
  // 尺寸换算
  const comparedHeight = (widthScale * 1080) / 1920;
  if (heightScale < comparedHeight) {
    widthScale = (heightScale * 1920) / 1080;
  }
  // 计算理论的rem值,失去该宽度下的相应font-size值,并赋予给html的font-size,
  const rem = widthScale * baseScale;
  document.documentElement.style.fontSize = ${rem}px;
}
// 初始化
setRem();
// 扭转窗口大小时从新设置 rem
window.onresize = () => {
  setRem();
};`

三、在main.js外面引入

import './utils/rem';

四、配置postcss-pxtorem

### 根目录的postcss.config.js
`module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 100,
      minPixelValue: 12,
      propList: ['*'],
      exclude: (e) => {
        if (/src(\\|\/)views(\\|\/)Screen/.test(e)) {
          return false;
        }
        return true;
      },
    },
  },
};`

五、疏忽单个属性的形式（不转换rem）

1、配置propList: ['*', '!border', '!font-size'], 
2、像素单元申明中应用大写
    .rank-list__text {
      width: 300Px;
    }

六、参考文档

1、https://www.npmjs.com/package/postcss-pxtorem
2、https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
3、https://www.cnblogs.com/WhiteM/p/12720849.html