Vue3 + Ts + Vite 모바일 터미널 적응 튜토리얼 -- 시작하기 쉬움

표적:

일부 모델에서는 다른 화면이 나타나므로 모바일 터미널 프로젝트를 적응시키는 데 적응 체계가 사용되며 여기에서는 플러그인 방법을 예로 들어 소개합니다.

사용 과정:

1. 두 개의 플러그인 종속성을 다운로드하려면
   cnpm/ npm / yarn install [email protected] --save-dev 지정된 버전이 필요합니다. 그렇지 않으면 오류가 발생할 수 있습니다! ! !
   cnpm/ npm / yarn install lib-flexible --save

2. 루트 디렉터리에 postcss.config.js 파일을 만들고 다음 코드를 작성하고 직접 복사하면 됩니다.
   

module.exports = {
    
    
  plugins: {
    
    
    'postcss-pxtorem': {
    
    
      rootValue: 37.5,
      // 根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.no__rem']
      // 过滤掉.no__rem-开头的class，不进行rem转换处理
    }
  }
}

3. 도구 클래스 파일에 새 rem.js 파일을 만듭니다.

// 设置基础根文件大小
let baseSize = 37.5
// rem 函数
function setRem () {
    
    
  // 设计稿一般都是以375的宽度
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 调用方法
setRem()

// 监听窗口在变化时重新设置跟文件大小
window.onresize = function () {
    
    
  setRem()
}

4. main.ts 파일에 rem, js 메서드를 도입합니다.

import './utils/rem'

5. 끝났어! px 단위를 rem 단위로 자동 변환합니다.
   

---