モバイルフロントエンド適応ソリューション（概要）

ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近いくつかの記事を読んだので、ここで要約したいと思います。

まず、これまでに登場したモバイル端末への適応に関するいくつかの技術的ソリューションについて説明します。

（１）メディアクエリ、つまりCSS3メディアクエリを通じて
（２）Tmallホームページに代表されるフレックスレイアウト
（３）Rem+ビューポートスケーリング（Taobaoホームページの例）
（４）レム法

1. メディアクエリ

meida queries方式は、私が初期に採用したレイアウト方式と言えます。主にデバイスの幅をクエリしてさまざまなcssコードを実行し、最終的にインターフェイス構成を実現します。コア構文は次のとおりです。

@media screen and (max-width: 600px) { /*画面サイズが600px未満の場合は、次のCSSスタイルを適用します*/
  /*あなたの CSS コード*/
}

アドバンテージ

メディアクエリを使用すると、デバイスのピクセル比を判断できます。この方法はシンプルで低コストであり、特にモバイルと PC で同じコードセットが維持される場合に有効です。現在、Bootstrapなどのフレームワークはこのレイアウト方法を使用しています
画像は簡単に変更できます。CSSファイルを変更するだけです。
画面幅を調整しても、ページを更新しなくてもレスポンシブに表示できます。

欠点

コード量が比較的多く、メンテナンスが不便
大画面や高解像度のデバイスに対応するために、特に画像リソースの読み込みなど、他のデバイスリソースが浪費されます。
モバイルと PC のレスポンシブな表示効果を考慮すると、それぞれの固有のインタラクション方法が失われるのは避けられません。

2.フレックスレイアウト

Tmall の実装方法を使用して説明しましょう。

viewport固定されています: <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高さは固定、幅は適応可能で、すべての要素はpx単位として使用します。

画面の幅が変わると、ページもそれに応じて変化します。その効果は、PC ページの流動的なレイアウトに似ています。幅を調整する必要がある場合は、レスポンシブレイアウト (NetEase News など) を使用するだけで、「適応」が実現されます。

3. rem + ビューポートスケーリング

これは Taobao が採用しているソリューションでもあります。画面の幅に応じてrem値が設定されます。適応させる必要がある要素はremを単位として使用し、適応させる必要がない要素は引き続きpx単位として使用します。 (1em = 16ピクセル)

追伸：レム
remはCSS3で新たに追加された相対単位（root em）であり、広く注目を集めています。このユニットはemとどう違うのですか?
違いは、 rem を使用して要素のフォントサイズを設定する場合、相対サイズのままですが、HTML ルート要素に対してのみ相対的であるということです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものです。ルート要素のみを変更すると、レイヤーごとにフォントサイズが複合される連鎖反応を回避しながら、すべてのフォントサイズを比例的に調整できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。サポートされていないブラウザの場合、解決策も非常に簡単で、絶対単位の追加宣言を記述するだけです。これらのブラウザは、rem で設定されたフォントサイズを無視します。例: p{font-size:14px;font-size:0.875rem;}
(単位変換ツールをお勧めします: http://pxtoem.com/)

実施原則

remに応じてページをdpr倍に拡大し、 viewportを1/dprに設定します。

iPhone 6 PlusのDPRが3の場合、ページは3倍に拡大され、Plusでは1px（CSS単位）がデフォルトで3px（物理ピクセル）になります。
次に、 viewportを 1/3 に設定すると、ページ全体が元のサイズに戻り、高解像度が実現します。

このようにすると、デバイスに表示される Web ページ全体のページ幅は、デバイスの論理ピクセルサイズ、つまりdevice-widthと等しくなります。
このdevice-widthの計算式は、設備的物理分辨率/(devicePixelRatio * scale)です。
スケールが 1 の場合、 device-width = 設備的物理分辨率/devicePixelRatio 。

4. rem実装

たとえば、「Meizu」モバイル端末の実装では、 viewportも固定されています。

<meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">

次のコードを使用して、 rem参照値を制御します (デザインの実際のサイズは幅 720px で測定されます)

!関数 (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    関数e() {
      var h = a.getBoundingClientRect().width, g;
      b === 1 の場合
        高さ = 720
      }
      if(h>720) h = 720; //基準値の制限値を設定します g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    (b > 2) の場合 {
      3 = 3 です
    } それ以外 {
      (b > 1) の場合 {
        2 = 2 です
      } それ以外 {
        1 = 1 です
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("サイズ変更", 関数() {
      タイムアウトをクリアします(f);
      f = setTimeout(e, 200)
    }、 間違い）;
    e()
  }（ウィンドウ）;

cssはsassを通じてプリコンパイルされ、変数 $px は測定されたpx値をrem $px: (1/100)+rem;に変換するように設定されます。

1ピクセルの境界線HD

1. タオバオの実装方法

上記の Taobao 実装方法は、 rem + viewportスケーリングを使用してこれを実現することです。

transform: scale(0.5)

CSSコード:

div{
    幅: 1px;
    高さ: 100%;
    表示: ブロック;
    左境界線: 1px 実線 #e5e5e5;
    -webkit-transform: スケール(.5);
    変換: scaleX(.5);
}

欠点:

角丸は実現できず、4 つの境界線を実現するのは面倒で、個別にしか実現できません。ネストすると、含まれている効果に望ましくない影響を与えるため、このソリューションは :after と before で独立して使用されることの方が多いです。

box-shadow

実施方法：

CSS を使用して影を処理し、0.5 px の効果を実現します。

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

アドバンテージ：

基本的に、丸いボタン、単一の行、複数の行など、すべてのシナリオに対応できます。

欠点:

色の扱いは難しく、黒のrgba(0,0,0,1)が最も暗いケースです。影があり、使いにくいです。
box-shadowを多用すると、パフォーマンスのボトルネックが発生する可能性があります。
4 つの境界線を実装する効果は理想的ではありません。

2. イメージの実装

background-imageを使用して 1px を実現するには、 linear-gradientするか、画像を直接使用する ( base64 ) という 2 つの方法があります。

linear-gradient (50% 色、50% 透明)

単一行:

div{
    高さ: 1px;
    背景画像:-webkit-linear-gradient(上、透明 50%、#000 50%);
    背景の位置: 左上;
    背景繰り返し: 繰り返しなし;
    背景サイズ: 100% 1px;
}

複数行:

div{
    背景画像: -webkit-linear-gradient(上、透明 50%、#000 50%)、
    -webkit-linear-gradient(下、透明50%、#000 50%)、
    -webkit-linear-gradient(左、透明度 50%、#000 50%)、
    -webkit-linear-gradient(右、透明50%、#000 50%);
    背景サイズ: 100% 1px、100% 1px、1px 100%、1px 100%;
    背景繰り返し: 繰り返しなし;
    背景の位置: 左上、左下、左上、右上;

アドバンテージ：
単一の境界線または複数の境界線を設定し、色を設定できます

欠点:
グラデーションを多用するとパフォーマンスのボトルネックになる可能性がある大量のコード背景画像には互換性の問題がある

モバイルフロントエンド適応ソリューション（概要）に関するこの記事はこれで終わりです。モバイルフロントエンド適応に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: vue の v-for ディレクティブはリストのレンダリングを完了します

>>: IEウェブページのポップアップウィンドウの共通パラメータは自分で設定できます