vue-cli【flexible】画面フォント適応レイアウトと構成

0.前言:
多くのフロントエンドのパートナーは、ページ、特にモバイルエンドのページを書くときに、ページレイアウトやフォントサイズが画面幅によって変化することに比例して適応することを要求しています.では、vue-cli足場ではどのように実現すればいいのでしょうか.
1.flexibleライブラリのインストール:

//       ：
npm i lib-flexible --save-dev 

2.プロジェクトエントリファイルmain.jsにlib-flexibleを導入する:

//main.js ：
import 'lib-flexible'

3.プロジェクトindex.htmlのheadでmetaを構成する:

 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4.px 2 rem-loaderをインストールする:

//       
npm install px2rem-loader --save-dev

5.px 2 remコンパイラの構成:
build/utils.jsで、px 2 rem-loaderをcssLoadersに追加します.

//       
const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
 remUnit: 37.5 //          10，             750px。    iPhone5    32.0(320 / 10 = 32)
 }
}
// generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
 /**
 *      
 */
 }

6.プロジェクトの開始:

npm run dev

後の言葉:
プロジェクトをスタートさせた後、驚くべきことに完璧に解決されたことに気づき、PC側でも適用されますよ~
転載先:https://www.cnblogs.com/wangsongbai/p/10487360.html