REM移動エンドフィッティング（ベースVUE-CLI3、vant-UIのUIフレーム）

導入
postcss-pxtoremはレムにユニットpostcssプラグで
LIB-フレキシブル基準値REMを設定します

1、インストールフレキシブルLIB （REMは、基準値を設定するために使用されます）

NPM I -S amfe、柔軟

2、LIB-柔軟なファイルmain.jsに導入され

インポート「amfe、柔軟な」

図3に示すように、取付pxtoremのpostcss （postcss-pxtoremのpostcssプラグインユニットREMの変換のためです）

NPM postcss-pxtorem --save-devのインストール

4、公共の場で/ index.htmlをMETAタグを追加します

<メタ名= 「ビューポート」コンテンツ= 「幅=デバイス幅、初期スケール= 1、最大スケール= 1、最小スケール= 1、ユーザスケーラブル= NO」>

5、プロジェクトの設定postcss、二つの方法があります（ノートpackage.jsonとvue.config.js唯一の設定オプションは、しかし、設定していません）

（1）、package.jsonに配置

"postcss"：{
    "プラグイン"：{
        "autoprefixer"：{}、
	"postcss-pxtorem"：{
	     "rootValue"：37.5、
	     "propList"：[ "*"]

}}}

（2）、vue.config.jsに配置

CONST autoprefixer =（ 'autoprefixer'）を必要とします。
CONST pxtorem =（ 'postcss-pxtorem'）を必要とします。

module.exportsは= {
    CSS：{
        loaderOptions：{
        postcss：{
            プラグイン：[
            autoprefixer（）、
            pxtorem（{
                rootValue：37.5、
                propList：[ '*']
            }）
            ]
        }
        }
    }
}。

これは、適応だけで、自動的にレムに変換し、書き込みPXに必要な、私たちの内部CSSが、このようなvantとして引用し、理由の37.5、37.5にブラウザ、rootValueセットに表示されたことに留意すべきである完了しますUIフレームワーク第三者、フレームはピクセル単位で、REMと互換性がないため、第三者が、すなわち図rootValue幅（ここで、750px）半分75で設計の値を設定し、1であることができる：1縮小vant、ミント、UIコンポーネントそうでない場合は、そのような小さくなるボタンなどのスタイルの変化、があるでしょう。それ以来、私たちはセットデザイン（750pxの設計幅）の半分にスタイルだけでなく、値を書き込む時には37.5となっています。

すべてのサイズのスタイルを書いている時間が半分書き込み不便に変更されているので、より多くの人々が75に設定して喜んでいるときに、スタイルを書くために原稿のサイズに応じて設計することができますので、それは通常、rootValueに設定されています、彼はスタイルよりも多くを書いたときのデザイン案は、スタイルを書いて、ピクセル数を設計されています。コンポーネントのそれらは375の設計に基づいているので、ミント、UIなど、それらがレンダリングされるが、小さくなるので、サードパーティのフレームワークvantすることができます。ここでは、そのようなサードパーティ製のフレームワークのコンポーネントを解決するには、2つの方法があり、狭い問題を表示され、以下はvant-UIの例です：

図1は、vant-UI関連の構成要素を除外された設定は、そのようなアセンブリのフレームは、適応の単位としてPXないが、REMに組立フレームを許可しません。（このように非常に個人的な勧告）

この実施例vue.config.js構成（コンフィギュレーション同様のpackage.json）

CONST autoprefixer =（ 'autoprefixer'）を必要とします。
CONST pxtorem =（ 'postcss-pxtorem'）を必要とします。

module.exportsは= {
    CSS：{
        loaderOptions：{
        postcss：{
            プラグイン：[
            autoprefixer（）、
            pxtorem（{
                rootValue：75、
                propList：[ '*']、
                "SelectorBlackList"：[ "van-"] // vantフレームワーク関連のコンポーネントを除外
            }）
            ]
        }
        }
    }
}。

2、動的設定rootValueサイズは、すなわち、アセンブリフレームvant-UIのrootValueのためrootValueに75に設定されている私たち自身の設計喫水の幅のために37.5、750を得ました。それが可能な適応の全てに到達できるように、

新postcss.config.jsは、ルートディレクトリのファイル、およびvue.config.jsとpackage.jsonファイルの構成postcssを削除します。そして、次へpostcss.config.jsテキストに追加します。

CONST autoprefixer =（ 'autoprefixer'）を必要とします。
CONST pxtorem =（ 'postcss-pxtorem'）を必要とします。
module.exportsは=（{ファイル}）=> {
    remUnitを聞かせて
    IF（ファイル&& file.dirname && file.dirname.indexOf（ 'vant'）> -1）{
        remUnit = 37.5
    } そうしないと {
        remUnit = 75
    }
    リターン{
        プラグイン：[
            autoprefixer（）、
            pxtorem（{
                rootValue：remUnit、
                propList：[ '*']、
                selectorBlackList：[ 'バン-circle__layer']
            }）
        ]
    }
}

さて、これまでのところ、サードパーティ製のフレームワークのコンポーネントは狭小化の問題を解決する場合でも。

最後に、長ったらしい1：としてviewportユニットは、多くのブラウザが得ると互換性があり、lib-flexibleこの暫定的な解決策はいくつかの問題があり、それは現在のバージョンまたは以前のバージョンであるかどうか、使用済みあきらめることができます。私はあなたが使用を開始することを示唆しているviewport。このプログラムの代わりに

REM移動エンドフィッティング（ベースVUE-CLI3、vant-UIのUIフレーム）

おすすめ