Vue プロジェクト PC 側適応ソリューション (scss)

はじめに: Vue プロジェクトの適応は、プラグイン lib-flexible および postcss-px2rem を使用して行うことができます。

lib-flexible プラグインの役割: 画面サイズに応じて HTML ルートタグのフォントサイズを設定します。1rem はルートタグのフォントサイズと同じです。

postcss-px2rem プラグインの役割: 開発プロセス中に px 単位を使用できるように、px を rem に変換します。

注: このプラグインはインラインスタイルには適していません。インラインスタイルを使用する場合、postcss-px2rem は px を rem に変換できません

具体的な利用方法は以下の通りです。

1. パッケージをダウンロードします (yarn または npm を使用できます)

1.yarnコマンドでパッケージをダウンロードします。

yarn add lib-flexible postcss-px2rem

2.npmコマンドをダウンロードします。

npm i lib-flexible postcss-px2rem

2. プラグイン構成を変更する

1. lib-flexible プラグインの設定を変更する

node_modules フォルダーの lib-flexible でflexible.js ファイルを見つけ、refreshRem 関数を変更します。

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540* dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

に変更されました

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

2. postcss-px2rem を設定する

次のコードを vue.config.js ファイルに追加します。

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 192, // 设计稿十等分后的值1rem=192px
  remPrecision: 6 // 转化后小数点位数
})

module.exports = {
  css: {
    // PC分辨率端适配
    loaderOptions: {
      css: {},
      postcss: {
        plugins: {
          postcss
        }
      }
    }
  }
}

注: vue.config.js コードを変更するには、プロジェクトを再起動する必要があります

3. プロジェクトのテストを再開する

f12 コンソールは html タグをチェックします。html タグの font-size が設定されている場合、lib-flexible プラグインが有効であることを意味します。

スタイル px が rem に変換されているかどうかを確認し、rem に変換されている場合は有効になります。

ps: 適応プロセス中に、最初に私のユニット px が rem に変換されず、最終的に vue/cli バージョンが 5.0.8 から 4.5.15 に引き下げられて有効になりました。

px2rem-loader プラグインを使用して次の方法で調整および構成する場合、px2rem-loader プラグインの構成方法は scss コードには有効ではなく、css である必要があり、scss は使用できないことに注意してください。使用済み

 chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192, // 根据视觉稿，rem为px的十分之一，1920px  192 rem
        remPrecision: 8// 换算的rem保留几位小数点
      })
  }

Vue プロジェクト PC 側適応ソリューション (scss)

おすすめ