postcss-pxtorem モバイル適応の実装

npm インストール postcss-pxtorem -D

モジュール.エクスポート = {
  プラグイン: {
    '自動プレフィックス': {
      ブラウザ: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 32, //結果は、デザイン要素のサイズ/32です（通常、750pxデザインのルート要素のサイズは32に設定されます）。たとえば、要素の幅が320pxの場合、最終ページは10remに変換されます。
      propList: ['*'], //プロパティセレクタ、*は一般的なセレクタを示しますBlackList:[]はセレクタを無視します。ig-は、.ig-で始まるすべてのセレクタが変換されないことを示します}
  }
}

// rem比例適応設定ファイル // 基本サイズ const baseSize = 750 // この値はpostcss.config.jsファイルのrootValueと一致している必要があることに注意してください // rem関数を設定する function setRem () {
  // 現在のページ幅は 375 幅の拡大縮小率を基準としており、必要に応じて変更できます。一般的に、設計図は 750 幅です (設計図を入手して、都合に合わせて変更できます)。
  定数スケール = document.documentElement.clientWidth / 375
  // ページのルート ノードのフォント サイズを設定します ("Math.min(scale, 2)" は最大拡大率が 2 であることを意味します。実際のビジネス ニーズに応じて調整できます)
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
  リセット()
}