vue cli 4はvwモバイル端末の適応項目を作成します.

3557 ワード

vue

なぜモバイル端末でvwを使ってモバイル端末が似合うのですか?
ここ数年、モバイル端末の台頭により、モバイル端末の適合がますます重要になってきました.個人がこれまで使っていたのは、手洗されたFlexibleを適応させ、「Flexibleを使ってH 5ページの端末を洗うのにふさわしい」というリンクを付けましたが、完璧ではないことが分かりました.完璧に適配問題を解決しました.下は自分で建築した後の整理です.これまではどの案にも一定の欠陥があった.言外の意味では、まだどの案が完璧ですか?本当に完璧ではないですか?実はそうではないです.最近は新しいプロジェクトの中でより完璧にvwを使ってモバイル端末の適合をしています.viewport単位に対応しないソリューションを検討します.今日は整理して、みんなと分かち合います.もしプログラムに一定の欠陥があれば、一緒に写真を撮ってください.
1.私はVue-cli 4足場を使っています.
2.一つの項目を初期化します.

   vue create "vw-layout"  ("vw-layout  ---->    ")

   cd vw-layout

   npm run serve

3.必要なプラグインをインストールする

  npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano postcss-import postcss-url   --S

4.プラグインをインストールしないとエラーが発生します.

  npm i cssnano-preset-advanced --save-dev;

5.ルートディレクトリでファイルpostcs.co.fig.jsを作成し、下記のコードをコピーします.

module.exports = {
    "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
        utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        viewportWidth: 375,     // (Number) The width of the viewport.
        viewportHeight: 667,    // (Number) The height of the viewport.
        unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw',     // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
        mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
      },
      "postcss-viewport-units":{},
      "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      }
    }
  }

6.index.でJavaScriptファイルを導入する
viewport-units-buggggyfillは主に二つのJavaScriptファイルがあります.viewport-units-bugggyfill.jsとviewport-units-bugggyfill.hacks.js.あなたはこの二つのファイルをあなたのHTMLファイルに導入するだけです.例えば、Vueプロジェクトのindex.をそれらに導入します.


    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
        });

     /* var winDPI = window.devicePixelRatio;
        var uAgent = window.navigator.userAgent;
        var screenHeight = window.screen.height;
        var screenWidth = window.screen.width;
        var winWidth = window.innerWidth;
        var winHeight = window.innerHeight;

        alert(
            "Windows DPI:" + winDPI +
            ";\ruAgent:" + uAgent +
            ";\rScreen Width:" + screenWidth +
            ";\rScreen Height:" + screenHeight +
            ";\rWindow Width:" + winWidth +
            ";\rWindow Height:" + winHeight
        )   */
        //              ，   ，         
    }

7.中国のcontentでは、ブラウザの一部に画像が表示されません.この時はグローバルに属性を追加する必要があります.

  img {
			content: normal !important; 
		}

8.あのオーディエンスの文章を見られないはずです.彼は有料です.この『Vueプロジェクトの中でvwを使ってモバイル端末の適応を実現するにはどうすればいいですか?』を見てもいいです.

レディマシンの多例主従+ホイッスルモード

nodeでtypescriptを使ってsocketを開発して実践します.