Vueモバイル端末に最適な適応ソリューションについての簡単な説明

序文: 最近の医療モバイルプロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズにどのように適応するのでしょうか。

1. 適応ソリューション

このプロジェクトで使用した vue モバイルソリューションは、amfe-flexible と postcss-pxtorem の組み合わせです。

まず、amfe-flexibleを紹介します

amfe-flexible は、主に 1rem を viewWidth/10 に設定する柔軟なレイアウト構成スキームです。

そして、このライブラリpostcss-pxtoremがあります

postcss-pxtorem は、ピクセル単位を rem 単位に変換する postcss プラグインです。

2. 使い方と設定方法は？

1. amfe-flexibleとpostcss-pxtoremをインストールする

npm をインストール amfe-flexible --save
npm をインストール postcss-pxtorem --save

2. インストールが完了したら、使用する前に導入する必要があります。

これを使用するにはmain.jsにインポートする必要があります

'amfe-flexible' をインポートします。

このインポートはOKです

3. 次にpostcss-pxtoremの設定手順に進みます

postcss-pxtorem を設定するには、vue.config.js、.postcssrc.js、postcss.config.js のいずれかで設定します。重みは左から右に向かって小さくなります。そのようなファイルがない場合は、新しいファイルを作成します。設定する必要があるのは、次のいずれかだけです。

便宜上、vue.config.js のコードを次のように構成しました。

モジュール.エクスポート = {
    //...その他の設定 css: {
        ローダーオプション: {
            ポストcss: {
                プラグイン: [
                    'postcss-pxtorem' が必要です({
                        ルート値: 37.5,
                        プロップリスト: ['*']
                    })
                ]
            }
        }
    },
}

.postcssrc.js または postcss.config.js で次のように設定します。

モジュール.エクスポート = {
    「プラグイン」: {
        'postcss-pxtorem': {
            ルート値: 37.5,
            プロップリスト: ['*']
        }
    }
}

注記：
1. デザインの幅を 10 で割った値に応じて rootValue を設定します。ここでは、デザインが 375 であると仮定して、rootValue は 37.5 に設定されます。
2. propList は、変換する必要があるプロパティを設定するために使用されます。ここで、* はすべてのプロパティが変換されることを意味します。

上記の構成でプロジェクトで使用できます。

たとえば、私たちのプロジェクトでは次のように記述します。

.ログインフォーム{
    幅: 90%;
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    背景色: #fff;
    パディング: 20px;
    ボックスのサイズ: 境界線ボックス;
    境界線の半径: 10px;
    。タイトル {
      位置: 絶対;
      上: -50px;
      フォントサイズ: 24px;
      色: #fff;
      左: 0;
      右: 0;
      テキスト配置: 中央;
    }
  }

コードの出力は次のようになり、プラグインによって単位が自動的に変換されます。

ログインラッパー.ログインフォーム{
    幅: 90%;
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%,-50%);
    背景色: #fff;
    padding: .53333rem; // これは変換された単位であることに注意してください box-sizing: border-box;
    border-radius: .26667rem; // これは変換された単位であることに注意してください}

これで、vue モバイル端末に最適な適応ソリューションに関するこの記事は終了です。vue モバイル端末に最適な適応ソリューションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: