Vue3 + Ts + Vite モバイル端末適応チュートリアル -- 簡単に始められます

目標：

一部のモデルでは異なる画面が表示されるため、モバイル端末プロジェクトの適応には適応スキームが使用されます。ここでは例としてプラグイン方式を紹介します。

使用プロセス:

1. 2 つのプラグインの依存関係をダウンロードするには
   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単位に自動的に変換します。
   

---