vue-cli で lib-flexible+rem モバイル アダプテーションを構成する方法

今回は vue-cli で lib-flexible+rem mobileadaptation を設定する方法を説明します。 vue-cli で lib-flexible+rem mobileadaptation を設定する際の注意事項は次のとおりです。起きて見てください。

柔軟にインストール

npm install lib-flexible --save

フレキシブルのご紹介

以下のコードをプロジェクト

エントリーファイル

main.jsに追加して、flexible

import 'lib-flexible'

を導入します。

ピクセルからレム

webpack の px2rem-loader を使用して、px を rem に自動的に変換します

px2rem-loaderをインストール

npm install px2rem-loader --save-dev

px2remの使用法

px2rem をインストールした後、px を使用する際にいくつかの違いがあります。以下に簡単に紹介する px2rem の公式の紹介を参照してください。

pxを直接書くと、コンパイル後にremに直接変換されます ---- 以下の2つの場合を除き、他の長さにはこれを使用してください

pxの後に/*no*/を付けるとpxは変換されず、そのまま出力されます。 ---一般的なボーダーはこれを使用する必要があります

px の後に /*px*/ を追加すると、異なる dpr に従って 3 セットのコードが生成されます。 ----一般的なフォントはこれを使用する必要があります

サンプルコード

コンパイル前 (自分で書いたコード)

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

コンパイル後 (パッケージ化されたコード)

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

プロジェクトを再起動すると、デザイン ドラフトでピクセルを問題なく使用できるようになります。

注意: 落とし穴

viewportという名前のメタタグをindex.htmlの先頭に追加することはできません。flexibleが自動的に追加します。

更新: 外部から CSS を導入する場合、問題は px2rem が rem を変換できるかどうかです 2017.12.8 更新: 実際のアプリケーションでは、px2rem が外部からインポートされた CSS ファイルを正常に変換できる場合と、変換できない場合があることがわかりました。原因は何ですか? CSSの導入方法を3つ試してみたところ、1つ目は正常に変換できましたが、2つ目と3つ目は正常に変換できませんでした。理由については、私の知識不足のため未だに理解できません。 3 つの導入方法の違いについては、マスターに説明してもらってください。

これらのメソッドを理解していれば、cssLoader の importLoaders を設定する必要はありません。次のメソッドは、外部からインポートされた CSS を rem に変換する必要があるかどうかを制御するのが簡単であるためです。ただし、importLoaders を変更すると制御できず、

強制的に変換されます。

。

<style src=&#39;../assets/style.css&#39;>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

vue-cli の使用法の詳細な説明

Vue テンプレート ファイルのパッケージ化と構成手順の詳細な説明

JS による画像のストレッチの適応をどのように防ぐか

以上がvue-cli で lib-flexible+rem モバイル アダプテーションを構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。