モバイルプロジェクトは自動的にremに変換されます

今回はモバイルプロジェクトのremへの自動変換についてお届けします。モバイルプロジェクトをremに自動変換する際の注意点は何ですか? 以下は実際的なケースです。

多くの友人がモバイルプロジェクトを rem に自動的に変換したいと考えていると思いますが、これはフロントエンドのトレンドに沿ったもので、手書きやエディターのプラグインで変更を加えるのは非常に不便で、間違いが発生しやすいものです。この方法では次の問題が見つかりました:

1 古いビデオ チュートリアルに従ってみたところ、node npm webpack px2rem のさまざまなプラグイン バージョンが異なっており、まったく役に立たないことがわかりました

2 オンライン チュートリアルが不足しています。不完全でわかりにくいので、vscode の cssrem を手動で設定することを長い間考えましたが、それでも納得できず、最終的に次の方法を見つけました。ヘルプ

1 vue-cli のインストールについては詳しく説明しませんが、誰でもできるはずです

2 px2rem-loader をインストールして設定します (ここでは postcss は使用しません)。多くの問題を試しましたが、これを使用することにしました)

ステップ 1: npm install px2rem-loader

パート 2: webpack.base.conf.js にオブジェクトを追加します。ここでは他のものを使用し、以下に従って変更します。ルールは誰でも理解できると思います

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

ステップ 3: webpack.dev.conf.js の下のプラグインに何かを追加します。Apple 5 の場合は 40px である remUnit 属性に注意する必要があります。ここでは 40 ですが、80 に設定する人もいます。ここでの 40 は hotcss と一致するためです。以下で

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

の 4 番目の部分について説明します。これは、多くの人がこのステップを見逃しているだけです。 utils.js の下にある const cssLoader を見つけ、 ?importLoaders=1 を追加します

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

ここまででインストールは完了です

Input font-size:40px

Output font-size:1rem (iPhone の場合)

3デバイスのピクセル比が異なることは誰もが知っているので、hotcss を使用してデバイスのピクセル比リンクを調整します

Me src/assets/js/ に配置されており、習慣に応じて方法を導入できます。ここでは、hotcss.js を viewport.js に変更しました

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

これで完了です

この記事の場合の方法をマスターしたと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

以上がモバイルプロジェクトは自動的にremに変換されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。