vueプロジェクトでの問題

1.プロジェクトでどのように応答レイアウトを実現するか:remを使用します.
vue-cliを使用してプロジェクトフレームワークを構築した後、ディレクトリ構造のindex.htmlファイルにjsコードを追加します.   

fnResize();
window.onresize = function () {
  fnResize();
}
function fnResize() {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  if (deviceWidth >= 750) {
    deviceWidth = 750;
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320;
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';
}

vueプロジェクトでlib-flexibleを使用して、モバイル端末の適切な問題を解決します.
第一部分:lib-flexibleをプロジェクトに導入する
一、プロジェクトにlib-flexibleをインストールする
 

$  npm install lib-flexible --save

二、プロジェクトの入口jsファイルにlib-flexibleを導入する

import 'lib-flexible'

以上の2つのステップで、vueプロジェクトでlib-flexibleを使用して移動端の適合を解決することができます.
lib-flexibleはhtmlのheadにmeta name=「viewport」のラベルを自動的に追加し、htmlのfont-sizeを画面幅を10で割った、つまり1 remがhtmlルートノードのfont-sizeに等しいように自動的に設定します.設計原稿の幅が750 pxの場合、1 remは75 pxに等しいはずです.量のある要素の幅が150 pxであれば、cssで定義されている要素の幅はwidth:2 remです.
注意:
    1.htmlファイルのheadをチェックして、meta name=「viewport」ラベルがあれば、このラベルがあればlib-flexibleがデフォルトでこのラベルを使用するので、コメントする必要があります.lib-flexible自身が生成したmeta name=「viewport」を使用して、ハイビジョンに適した効果を達成します.
    2.htmlのfont-sizeは画面幅を10で割ったものなので、ページの最大幅を10 remに設定する必要があります.
    3.設計原稿からの寸法を手動で計算するたびにremを計算すると、効率が遅くなり、計算ミスが発生する可能性があるので、px 2 rem-loaderを使用してcssのpxを自動的にremに変換できます.
第2部:px 2 rem-loaderを使用してcss中のpxを自動的にremに変換する
一、px 2 rem-loaderのインストール
 

$  npm install px2rem-loader --save-dev

二、px 2 rem-loaderの構成
    1.build/utils.jsファイルを開き、exports.cssLoadersメソッドを見つけ、次のコードを追加します.

const px2remLoader = {

loader: 'px2rem-loader',

options: {

remUint: 75

}

}

    2.generateLoadersメソッドのloadersを変更する

//

// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

//

const loaders = [cssLoader, px2remLoader]

 

if (options.usePostCSS) {

loaders.push(postcssLoader)

}

 
次にnpm run devを再開し、コンソールを開くとコードのpxがremに変換されていることがわかります.
注意:
    1.この方法では.vueファイルstyleラベルのpxのみをremに変換でき、scriptラベルと要素styleで定義されたpxをremに変換できません.
    2..vueファイルstyleのいずれかの行のコードがremに変換されたくない場合は、コメント/*no*/を後に書けばよい
 
2.クライアント適合
どのように各種の設備を配合しますか:
   JSクライアントタイプ判定
  JSはクライアントがiOSまたはAndroid携帯電話のモバイル端末であるかどうかを判断する
  ブラウザのuserAgentを判断し、携帯電話がiosとAndroidクライアントであるかどうかを正則で判断します.
方法1:

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android  
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios  
if (isAndroid) {
  alert('  Android');
}
if (isiOS) {
  alert('  IOS');
}

方法2:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  alert('  IOS');
} else if (/(Android)/i.test(navigator.userAgent)) {
  //alert(navigator.userAgent);
  alert('  Android');
} else {
  alert('  PC');
};

3.cssスタイルキャッシュ
 実際のプロジェクト開発の過程で、ページはサーバーにアップロードされました.サーバの圧力を減らし、ユーザーがロードを少なくするために、ブラウザは画像、css、jsをローカルにキャッシュし、次回のWebサイトへのアクセス時に使用します.これにより、サーバの圧力が減少するだけでなく、ユーザーのダウンロード回数も減少し、より良いユーザー体験を得ることができます.  しかし、バージョンのアップグレードやcss、jsなどの調整を行うと、キャッシュによって更新後のスタイルが表示されなくなり、頭が痛くなります.ユーザーが手動でキャッシュをアップグレードしない限り、ほとんどのユーザーはこのサイトに正常にアクセスするために手動でキャッシュをクリアすることはありません.ユーザーはキャッシュの問題かどうか分からないからです.結局、ユーザーはあなたのページに問題があり、正常にアクセスできないと思っています.  キャッシュを正常に使用し、このような問題を回避するために、この問題を解決すればどうなるか考えてみましょう.  スタイルを変更して正常にアクセスできない場合、スタイルのファイル名を変更しますか?答えは可能です.ここでは検証しません.しかし、毎回手動でファイル名を変更するのは明らかに面倒で、ファイル名を変更しないことができますか?答えは肯定的だ.導入したファイル名の後にバージョン番号を追加することができます.以前のバージョンとは異なるバージョン番号(一般的に更新日)です.コードは次のとおりです.   
コードは次のとおりです.
   

私のCSSファイル名とJSファイル名の後ろに「v=20140829」が付いているのが見えます.これにより、ファイル名を変更せずにキャッシュできるようになり、リアルタイムで更新できます.「v=20140829」は一般的に書かれているだけで、他のものに変更することができます. 
 

最後はピクチャで、一般的にimgラベルのピクチャはバックグラウンドで生成されたファイル名であるため、名前を変更しません.固定されたファイル名の画像であれば、方法は同じです.また、背景図については、スタイル名が変更されたため、画像の解析パスが自然に更新同期されるため、背景図も更新される.

3.私の最適化方法

   cssスタイルの後ろに乱数をパラメータとして追加します.

   eg.

htmlヘッダにno-cache

を付ける方法もあります