VUE PC端末 携帯端末 REM適応

2 つのプラグインが必要です 

rem ベンチマークを設定するためのlib-flexible。

postcss-pxtorem は、単位を rem に変換するための postcss プラグインです。

lib-flexibleをインストールする

cnpm i amfe-flexible

main.jsで参照されています

import 'amfe-flexible'

postcss-pxtoremをインストールする

cnpm install postcss-pxtorem -D

vue2 を選択し、プロジェクトのルート ディレクトリに .postcssrc.js ファイルを作成します。

module.exports = {
  plugins: {
    'autoprefixer': {
       browsers: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'],
      selectorBlackList: ['norem']
    }
  }
}

vue3+vite の場合:

vite.config.js で設定します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [vue()],

  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  }
})

 

` rootValue` : ルート要素のフォント サイズを示します。ルート要素のサイズに応じて単位変換が行われます。

デザインドラフトの 10 分の 1 に設定します。

たとえば、デザイン ドラフトの幅が 750 の場合は、75 に設定する必要があります。

` propList`は、px から rem に変換できるプロパティを設定するために使用されます。  

たとえば、「*」はすべての属性を変換する必要があることを意味し、「width」は「width」属性のみを変換する必要があることを意味します。