Vant+postcss-pxtorem 브라우저 적응 기능 구현

Rem 레이아웃 적합
Vant의 스타일은 기본적으로 px를 단위로 사용하며, rem 단위를 사용해야 한다면 다음 두 가지 도구를 사용하는 것을 추천합니다.
postcss-pxtorempostcss 플러그인으로 단위를rem로 바꾸는 데 사용됩니다
lib-flexiblerem 기준값 설정에 사용
마지막에 서프라이즈!

1. npm 설치

npm install postcss-pxtorem --save

2. 새로 만들기.postcssrc.js는 다음과 같이 수정합니다

주:
1. 다음 주석 코드가 켜진 후 스크립트를 실행하면 오류를 보고하는 알림이 나타납니다. 무슨 소용이 있는지 모르겠지만 주석을 달면 됩니다.

module.exports = {
 "plugins": {
 	//"postcss-import": {},
  //"postcss-url": {},
  "autoprefixer": {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  "postcss-pxtorem": {
   "rootValue": 32,
   "propList": ["*"]
  }
 }
}

3. 새 rem.js

const baseSize = 32
//   rem  
function setRem () {
 //   750  ， 。
 const scale = document.documentElement.clientWidth / 750
 //  
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
//  
setRem()
//   rem
window.onresize = function () {
 setRem()
}

4. main에서js에 rem.js 도입

import "./rem.js"

이로써 Vant+postcss-pxtorem은 브라우저의 적합성을 실현하면 완성됩니다.
직접 스타일에서 px를 원활하게 사용하고 자동으로rem로 변환할 수 있습니다.
잠깐만 가지 마!!!객관
여기까지 하면 끝나는 줄 알았어?NO, 아래를 보면postcss-pxtorem을 기반으로 하지 않은rem가 어울려요.
말이 많지 않으면 바로 코드를 찍어라.

5. rem.js를 새로 만들고 다시 main.js에서 도입

(function (doc, win) {
 var docEl = doc.documentElement
 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
 var recalc = function () {
  var clientWidth = docEl.clientWidth
  if (!clientWidth) return
  if (parseInt(20 * (clientWidth / 320)) > 35) {
   docEl.style.fontSize = 35 + 'px'
  } else {
   docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
  }
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

import "./rem.js"

6. 스타일 전역 변수 추가 및 사용

//   750  ， 。
$rem: (640/750)/40;
body{
	width: $rem * 24rem;
}

Vant+postcss-pxtorem에 대한 브라우저 맞춤법에 대한 이 글은 여기까지 소개되었습니다. 더 많은 Vant+postcss-pxtorem 맞춤법에 대한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 찾아보세요. 앞으로 많은 응원 부탁드립니다!