[Plugin] postcss-px2rem 플러그인으로 콘텐츠 적응

1. 설치
npm i postcss-px2rem -D
2.vue.config.js 파일

const px2rem = require('postcss-px2rem');
const postcss = px2rem({
  remUnit: 192 //     baseSize，   rem.js    
});
module.exports = {
//     
 css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      }
    }
  }
};

3. src에서rem.js 폴더 만들기

export function setRemInit() {
  // postcss-px2rem   
  //     
  const baseSize = 192;
  //    rem   
  function setRem() {
    //           1920 px(     )     ，         。
    const scale = document.documentElement.clientWidth / 1920;
    //            
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
    
    //   if    ，            ，         
    if (Number(document.documentElement.style.fontSize.slice(0, -2)) <= 130) {
      document.documentElement.style.fontSize = '130px';
    }
  
  }
  //    
  setRem();
  //             rem
  window.addEventListener('resize', setRem);
}

4.main.js에서 rem.js 참조

import { setRemInit } from '@/rem';

setRemInit(); //         

주: 매개 변수 해석:baseSize는 html font-size의 크기를 설정하는 데 사용됩니다.remUnit는postcss-px2rem에서 px를rem로 설정합니다. 예를 들어width: 1920px,remUnit = 192입니다.페이지 렌더링이 완료되면 width:10rem를 발견할 수 있습니다.1920/192 =10. 그래서 베이스 사이즈와remUnit의 값이 항상 일치하도록 보증해야 html font-size와 px를 정확하게 맞출 수 있습니다