0 부터 vue-cli 4 설정 자체 적응 vw 레이아웃 구현

간단 한 소개
viewportWidth 도 vw 레이아웃 입 니 다.설정 상 remi 레이아웃 보다 훨씬 간결 합 니 다.bu 는 lib 를 설치 해 야 합 니 다.rem.js 파일 을 추가 할 필요 도 없습니다.
약칭 손가방 사용
설치 패키지

npm install postcss-px-to-viewport -D

혹은

yarn add postcss-px-to-viewport -D

이동 단 설정
vue.config.js 에서 loaderOptions 를 찾 습 니 다.없 으 면 css 속성 에서 postcss 를 추가 해 야 합 니 다.

css: {
  extract: IS_PROD,
  sourceMap: false,
  loaderOptions: {
   postcss: {
    plugins: [
     require("postcss-px-to-viewport")({
      unitToConvert: "px",	//        ，   "px"
      viewportWidth: 375,  //      ，           ，   375
      // viewportHeight:667,//      ，            
      unitPrecision: 3,		//           
      propList: [		//     vw     
       "*"
      ],
      viewportUnit: "vw",		//          
      fontViewportUnit: "vw",		//          
      selectorBlackList: [],	//      CSS   ，        ，     px   。
      minPixelValue: 1,		//          ，   1  ，    1      
      mediaQuery: false,		//                 
      replace: true,		//          ，        
      exclude: /(\/|\\)(node_modules)(\/|\\)/,		//                 ，   'node_modules'     
     })
    ]
   }
  }
 },

효과.
서로 다른 모델 아래 에서 우 리 는 글씨체 의 크기 가 모두 따라서 바 뀌 는 것 을 보 았 다
 
pc 엔 드 설정

css: {
  extract: IS_PROD,
  sourceMap: false,
  loaderOptions: {
   postcss: {
    plugins: [
     require("postcss-px-to-viewport")({
      unitToConvert: "px",	//        ，   "px"
      viewportWidth: 1920,  //      ，  pc      ，   1920
      // viewportHeight: 1080,//      ，            
      unitPrecision: 3,		//           
      propList: [		//     vw     
       "*"
      ],
      viewportUnit: "vw",		//          
      fontViewportUnit: "vw",		//          
      selectorBlackList: [],	//      CSS   ，        ，     px   。
      minPixelValue: 1,		//          ，   1  ，    1      
      mediaQuery: false,		//                 
      replace: true,		//          ，        
      exclude: /(\/|\\)(node_modules)(\/|\\)/,		//                 ，   'node_modules'     
     })
    ]
   }
  }
 },

효과.
우 리 는 글꼴 을 예 로 들 면,마찬가지 로 글꼴 이 해상도 에 따라 크기 가 다르다 는 것 을 볼 수 있다.

참고 자료
vue-cli 에 서 는 postcss-px-to-view port 플러그 인 을 사용 하여 모 바 일 적응 을 실현 합 니 다.
Vue(vue 4.0)항목 에서 응답 식 레이아웃 플러그 인 postcss-px-to-view port 를 사용 합 니 다.
0 부터 vue-cli 4 에서 자체 적응 vw 레이아웃 을 설정 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 사항 은 0 부터 vue-cli 4 에서 자체 적응 vw 레이아웃 내용 을 설정 하 는 것 입 니 다.예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!