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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux環境でグラフデータベースneo4jを構築する方法の説明
>>: 数千万のデータを扱うMySQLのページングクエリのパフォーマンスを最適化する
目次序文型推論真理値の絞り込み平等の縮小演算子の絞り込みインスタンスの絞り込み狭まりの本質ユニオン型...
MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...
100 以内の自然数をランダムに選択し、プレイヤーに 10 ラウンド以内にその数を推測させる数字推...
VMware バージョン: VMware-workstation-full-16 VMware バー...
まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...
目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...
1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...
目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...
場合によっては、ユーザーがボタンをクリックして同様のフォームを追加し、クリックごとに 1 回追加でき...
目次概要フレームワークを選択する理由は何ですか? js のエンバーEmber.js と Vue.js...
目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...
1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...
目次1. プロキシとは何ですか? 2. 使い方は? 1. プロキシを使用する簡単な例2. 対象オブジ...
質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...
数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...