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のページングクエリのパフォーマンスを最適化する

推薦する

Docker コンテナのカスタム ホストのネットワーク アクセス操作

docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...

Vue SPA ファースト スクリーン最適化ソリューション

目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...

CSSスプライトの応用の詳細な説明

CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなア...

Linux デスクトップ用の 4 つのスキャン ツール

ペーパーレスの世界はまだ到来していませんが、書類や写真をスキャンすることで紙をなくす人が増えています...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...

レスポンシブレイアウトについて知っておくべきこと

1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...

MySQL における楽観的ロック、悲観的ロック、MVCC の包括的な分析

序文データベースの実際の使用では、データの書き込みや読み取りを同時に行わないことが必要な状況によく遭...

IE8ブラウザはWebページ標準に完全互換となる

<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...

TypeScript における型保護の詳細な説明

目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...

Linux での tcpdump コマンドの詳細な分析と使用方法

導入簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...

CSSは、他のレイヤーを変更せずに、多層ネスト構造の最外層を回転させる効果を実現します。

次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...

CSS で QR コードスキャンボックスを実装するためのサンプルコード

カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキ...

ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...

メンテナンス可能なJSコードの書き方を教えます

目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...

SQL インジェクション脆弱性プロセスの例と解決策

コード例: パブリッククラスJDBCDemo3 { パブリック静的voiddemo3_1(){ bo...