Vueモバイル端末の適応化問題の詳細説明

Vueモバイル端末の適応化問題の詳細説明

1. vue uiでプロジェクトを作成する

ここに画像の説明を挿入

2. 基本設定項目を選択する

ここに画像の説明を挿入

3. プロジェクトを実行する

ここに画像の説明を挿入

4. 新しいrem.jsファイルを作成する

// 基本サイズ const baseSize = 32
// rem関数を設定する function setRem() {
  // 現在のページ幅を 750 幅に対して拡大縮小する比率。必要に応じて変更できます。
  定数スケール = document.documentElement.clientWidth / 750
  // ページのルートノードのフォントサイズを設定します。 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
  リセット()
} 

ここに画像の説明を挿入

5. main.jsにインポートする

'./utils/rem' をインポートします

ここに画像の説明を挿入

6. pxをremに自動的に変換するためにpostcss-pxtoremをインストールする

npm インストール postcss-pxtorem -D 

ここに画像の説明を挿入

7. 新しい.postcssrc.jsファイルを作成する

モジュール.エクスポート = {
  「プラグイン」: {
    "postcss-import": {},
    "postcss-url": {},
    // 対象ブラウザを編集するには、package.json の "browserslist" フィールドを使用します
    「自動プレフィックス」: {},
    "postcss-pxtorem": {
      "ルート値": 32,
      "propList": ["*"]
    }
  }
} 

ここに画像の説明を挿入

8. 実行を続行し、エラーを報告する

ここに画像の説明を挿入

9. 新しいvue.config.jsファイルを作成する(手順8のエラーを解決するため)

モジュール.エクスポート = { 
  //index.html ファイルをダブルクリックして直接実行します publicPath: './',
  // vue-cli-service build を実行したときに生成される本番環境ビルドファイルのディレクトリ outputDir: 'dist',
  保存時にlint: true、
  // ランタイムコンパイラを含む Vue ビルドを使用するかどうか。 trueに設定するとテンプレートが使えるようになる
  ランタイムコンパイラ: true、
  //本番環境でソースマップファイルを生成するかどうか。ソースマップの詳細については末尾を参照してください。productionSourceMap: false、
  Webpack の設定: config => {
    if (process.env.NODE_ENV === 'production') { // 本番環境の設定を変更...
      戻る {

      }
    } それ以外 {
      戻る {

      }
    }
  },
  css: {
    extract: true, // CSS ソースマップを有効にしますか?
    sourceMap: false, // cssプリセット構成項目 modules: false,
    ローダーオプション: {
      ポストcss: {
        プラグイン: [
          'postcss-pxtorem' が必要です({
            rootValue: 37.5, // 変換のベース selectorBlackList: ['weui', 'mu'], // 変換の正規一致項目を無視 propList: ['*']
          })
        ]
      }
    }
  },

  // webpack-dev-server 関連の設定 devServer: { // プロキシを設定 hot: true, // ホットロード host: '0.0.0.0', // IP アドレス port: 8082, // ポート https: false, // false で https がオフになり、true でオンになります open: true, // ブラウザを自動的に開きます overlay: {
      警告: 偽、
      エラー: 偽
    }
  }
} 

ここに画像の説明を挿入

10. 自動適応が完了しました

ここに画像の説明を挿入

Vueモバイル端末の適応化問題に関する詳細な説明はこれで終わりです。Vueモバイル端末の適応化に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueはモバイル画面への適応を実現するためにremを使用する
  • Vue はモバイル適応に最適なソリューションです (テスト済みで効果的)
  • Vue モバイル プロジェクトの適応の詳細な説明 (mint-ui を例に挙げて)
  • Vueモバイル適応ソリューションの詳細な説明
  • Vueモバイル画面適応の詳細な説明
  • Vue モバイル適応問題を解決する
  • Vueモバイル端末に最適な適応ソリューションについての簡単な説明

<<:  Linux環境でグラフデータベースneo4jを構築する方法の説明

>>:  数千万のデータを扱うMySQLのページングクエリのパフォーマンスを最適化する

推薦する

TypeScript 学習ノート: 型の絞り込み

目次序文型推論真理値の絞り込み平等の縮小演算子の絞り込みインスタンスの絞り込み狭まりの本質ユニオン型...

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

数字当てゲームを実装するための純粋なJavaScript

100 以内の自然数をランダムに選択し、プレイヤーに 10 ラウンド以内にその数を推測させる数字推...

VMware15/16 VMwareのロックを解除してMacOSをインストールする詳細な手順

VMware バージョン: VMware-workstation-full-16 VMware バー...

Ubuntu 12.04 でカーネルツリーを構築する実装プロセスの詳細な説明

まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...

高度なクローラー - JS 自動レンダリングのための Scrapy_splash コンポーネントの使用

目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...

ファイアウォールルールの設定とコマンド(ホワイトリスト設定)の詳しい説明

1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

Vue のループフォーム項目例の詳細な説明

場合によっては、ユーザーがボタンをクリックして同様のフォームを追加し、クリックごとに 1 回追加でき...

Ember.js と Vue.js の詳細な比較

目次概要フレームワークを選択する理由は何ですか? js のエンバーEmber.js と Vue.js...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

CentOS に Redis と MySQL をインストールする

1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...

JavaScript Proxyオブジェクトの詳細な説明

目次1. プロキシとは何ですか? 2. 使い方は? 1. プロキシを使用する簡単な例2. 対象オブジ...

html2canvasで画像が正常にキャプチャできない時の解決方法

質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...

@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...