[アダプタ] VW遠位端は、モバイル・ユニットをプログラムするために適合さ

携帯端末の最近の強い上昇では、モバイル端末適応原因ますます重要、個人レムが適応される前に使用されるが、調査結果は完璧ではないされた、砂漠の教師を強制することです」と題する記事を書いた方法Vueのプロジェクトをモバイル端末適応のために使用VW 問題を解決するために、「より完璧なフィット感、ここに自分の後に設定仕上げの一部です。

プロジェクトを作成します。

//vue-cli 3.0+ 版本
vue init webpack vue-vw-demo
cd  vue-vw-demo

必要なプラグインをインストールします。

NPM I postcssアスペクト比ミニpostcss-PX・ツー・ビューポートpostcss-ライトのSVG postcss-cssnext postcssビューポート単位postcssインポートpostcss-URL cssnano、-S

ルートディレクトリを設定します`postcss.config.js`

= module.exportsは{
   "プラグイン" {
     "postcssインポート" ：{}、
     "postcss-URL" ：{}、
     "postcssミニアスペクト比" ：{}、
     "書き込みSVG-postcss"：{ UTF8：falseに}、
     "postcss-cssnext" ：{}、
     "PX-postcssツービューポート" ：{ 
      viewportWidth： 750、// ウィンドウの幅、私たちのデザイン案、一般的に750の幅に対応する 
      viewportHeight：1334の、// デバイス750の幅を指定するためのウィンドウの高さは、一般的に1334指定、配置されなくてもよい 
      unitPrecision :. 3、// 指定`px`窓部の値が（しばしば割り切れない）桁に変換される 
      。viewportUnit 'VW'、// Windowsの単位を変換する必要性を指定し、推奨VW
      selectorBlackList：[「.IGNORE」、」.hairlines']、// 指定されたウィンドウユニットはクラスに変換されていない、無制限の追加、カスタマイズすることができ、1人のまたは2の一般的なクラス名を定義することをお勧めします 
      minPixelValue :. 1、// 未満か`単位に等しい1px`は、あなたはまた、あなたが望む値に設定することができ、窓に変換されていない 
      ：mediaQueryを偽 //はメディアクエリでconversion` px`を許可
    }、
    「postcss-ビューポート単位」：{}、
    「cssnanoを」：{ 
      PRESET： "高度" 、
      autoprefixer：falseに、
       "postcss-のZIndex"：偽へ
     } 
  } 
}

VWとの互換性（index.htmlを導入）

// 在index.htmlを添加JS 
<スクリプトSRC = "// g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport -単位-buggyfill.min.js "> </ SCRIPT> // 在index.htmlの中调用ビューポート単位-buggyfill 
<SCRIPT>  
  window.onload = 関数（）{ 
    window.viewportUnitsBuggyfill.init（{ 
      ハック：window.viewportUnitsBuggyfillHacks 
    }）; 
  } </ SCRIPT>

設定SCSS

NPMノード-SASS --save-インストールDEV 
NPMインストールSASS -loader --save-devのを

するには./build/webpack.base.config.js、以下の設定を追加

module.exportsは= { 
  モジュール：{ 
    ルール：[ 
      ... 
      { 
        テスト： /\.scss$/ 、
        ローダー：[ "スタイル"、 "CSS"、 "サス" ] 
      } 
    ] 
  } 
}

ヒント：使用アセンブリは、追加することを忘れないでくださいlang='scss'。

ここでの設計案20ピクセルの書き込み二回（40ピクセル）

最後の実行cnpm run devプロジェクトを開始するには、それが最後のオリジナル砂漠の教師の「見取ることが推奨される方法は、モバイルエンドVueのプロジェクトのために使用VWフィットする」、非常に明確に書かれたオリジナルを、各プラグインにも説明し、私はあなたが読み取りを持っていると考えています収穫。