vueプロジェクトはスクリーン適応処理をします.

由緒が立つ
プロジェクトはvue-cliに基づいて構築され、以前のプロジェクトはlessの機能関数を使ってメディアクエリを行う画面が適切ですが、JavaScriptの浮動小数点データ処理のため、この言語自体のバグ問題は、常にいくつかの計算誤差が発生します.ここで新たに行うプロジェクトは淘宝のlib-flexibleのライブラリを採用して、スクリーン適応処理を行います.プロジェクトが実行可能になったら、私達は引き続きfelxibleライブラリをインストールします.

  npm i lib-flexible -S

npmがインストールできない場合は、cnpmに切り替えてインストールし、メインファイルのmain.jsに導入することができます.

  import  'lib-flexible'

index.1ファイルにmetaタグを設定します.

そしてプロジェクトにcssを書くと自動的にremをpxに変換します.px 2 remというツールをインストールする必要があります.インストール:

  npm i px2rem-loader -D

until.jsプロファイルでloaderに関連した配置をする:
cssLoaderオブジェクトの下にpx 2 rem Loaderオブジェクトを追加します.

  const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
      //       psd         / 10    ,   750   
      remUnit : 75  
    }
  }

その後、utils.jsファイルのgenerate Loaders関数のloaders定数を[cssLoader,px 2 remLoader]に変更します.

  const loaders = [cssLoader, px2remLoader];

このように完成しましたので、配置は開発する時に、設計原稿の上から量ったサイズだけを書いてください.例えば、font-size:18 pxです.直接18 pxを書けばいいです.
----------------------作者:風が吹いていることは幸福のリンクである:https://www.jianshu.com/p/02c1d9a63dc8 出所:簡書簡書の著作権は著者の所有になります.いかなる形式の転載も作者に連絡して授権を得て、出所を明記してください.