vue-cli で lib-flexible+rem モバイルアダプテーションを構成する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-13 14:19:16

オリジナル

2048 人が閲覧しました

今回は 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 サイトの他の関連記事を参照してください。