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のページングクエリのパフォーマンスを最適化する
docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなア...
ペーパーレスの世界はまだ到来していませんが、書類や写真をスキャンすることで紙をなくす人が増えています...
目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...
1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...
序文データベースの実際の使用では、データの書き込みや読み取りを同時に行わないことが必要な状況によく遭...
<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...
目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...
導入簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...
次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...
カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキ...
背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...
目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...
コード例: パブリッククラスJDBCDemo3 { パブリック静的voiddemo3_1(){ bo...