初心者の成長記録(10)_html/css_WEB-ITnose

「初心者の成長記録(9)」でH5ページの生成とアプリの関係について触れましたので、今日はこの記事で適応関係についてまとめます。

1. 適応について

私はかつて、IE ブラウザーの下位バージョンとの互換性について頭を悩ませていましたが、モバイル時代にはこれらの問題に別れを告げることができると考えていました。案外、モバイル時代になって、さまざまな端末に対応するために、いろいろいじらなければなりません。現在人気の高い H5 ページはどのようにして多端末対応を実現しているのでしょうか?

目標:

Double 11 モバイル ページを例に挙げます。たとえば、以下の図のような H5 ページを実装するとします。

目標は非常に明確で、次のような H5 ページを作成することです。 。

問題点:

H5 ページは PC の Web ページよりもはるかに単純ですが、私たちにとって頭の痛い問題は、ページをさまざまな端末デバイスに適応させる方法を見つけることです。下の写真を見れば、これがどれほど苦痛であるかがわかるでしょう:

Hand Tao H5 が適応する必要がある端末デバイスのデータを見てみましょう:

Hand Tao チーム適応コラボレーション モード:

初期mobile 端末開発では、端末デバイスの適応の問題は Android シリーズにのみ属しますが、多くの設計者は Android 適応の問題を無視して、一連の iOS プラットフォームの設計ドラフトのみを作成することがよくあります。しかし、iPhone6とiPhone6+の登場により、端末適応の問題はAndroidシリーズとは関係なくなり、この時からモバイル端末適応は完全に「混合画面」時代に入りました。

非常に多くの端末デバイスに対処するには、デザイナーとフロントエンド開発者の間でどのようなコラボレーション モデルを採用する必要がありますか?もしかしたら皆さんも非常に興味があるのではないでしょうか。

淘宝網のデザイナーとフロントエンド開発者の間の適応コラボレーションの基本的な考え方は次のとおりです:

デザインと開発のベンチマークとして 1 つのサイズを選択します

残りの 2 つのサイズに自動的に適応する一連の適応ルールを定義します (実際にはそうではありません)この 2 つだけです、ご存知のとおり)

特殊適応効果はデザイン効果を与えます

百聞は一見にしかずなので、前の図にこだわりましょう:

Hand Tao のデザイナーとフロントエンド開発者 コラボレーション プロセス中: モバイル ショッピング デザイナーは、ベースライン デザイン サイズとして iPhone6 を選択することが多く、フロントエンドに配信されるデザイン サイズは 750px * 1334px に基づいています (高さはコンテンツによって変わります)。フロントエンド開発者は、一連の適応ルールを通じて他のサイズに自動的に適応します。

上記によると、デザイナーから渡された設計図は 750px * 1600px のページです:

フロントエンド開発により端末適応計画が完了します

デザイナーから渡された設計図を取得したら、残りの作業を行いますそれはフロントエンド開発者次第です。長年の探求と実践を経て、Hand Taobao は一連のモバイル端末適応ソリューション、つまり柔軟なソリューションをまとめました。

このソリューションが実際の開発でどのように使用されるかについては、当面は簡単に説明します。その後、詳細な開発と実装を続ける前に、まずいくつかの基本概念を理解する必要があります。

いくつかの基本概念:

実際の戦闘を実行する前に、まず次の基本概念 (用語) を理解する必要があります:

ビューポート

簡単に理解すると、ビューポートは厳密にはブラウザのウィンドウと同じです。デスクトップ ブラウザでは、ビューポートはブラウザ ウィンドウの幅と高さです。ただし、モバイル デバイスの場合は少し複雑です。

モバイル端末のビューポートが狭すぎます。CSS レイアウトをより適切に提供するために、仮想ビューポートビジュアルビューポートとレイアウト ビューポートレイアウトビューポートの 2 つのビューポートが提供されています。

物理ピクセル:

物理ピクセルはデバイス ピクセルとも呼ばれ、表示デバイス内の最小の物理コンポーネントです。各ピクセルは、オペレーティング システムに応じて独自の色と明るさを設定できます。これらのデバイスのピクセル間のわずかな距離が、私たちの肉眼を騙して画像を見ているように見せかけます。

デバイス非依存ピクセル (密度非依存ピクセル):

密度非依存ピクセルとも呼ばれるデバイス非依存ピクセルは、コンピューター座標系の点として考えることができます。この点は、次の仮想ピクセルを表します。プログラムで使用できます (CSS ピクセルなど)。その後、関連するシステムによって物理ピクセルに変換されます。

CSS ピクセル

CSS ピクセルは抽象的な単位であり、主にブラウザーで Web ページ上のコンテンツを正確に測定するために使用されます。通常の状況では、CSS ピクセルはデバイス非依存ピクセル、または略して DIP と呼ばれます。

画面密度

画面密度とは、デバイスの表面に存在するピクセル数を指し、通常は 1 インチあたりのピクセル数 (PPI) で測定されます。

デバイス ピクセル比 (デバイス ピクセル比)

デバイス ピクセル比は dpr と呼ばれ、物理ピクセルとデバイスに依存しないピクセルの対応を定義します。その値は次の式に従って計算できます:

デバイスのピクセル比 = 物理ピクセル / デバイスに依存しないピクセル

JavaScript では、現在のデバイスの dpr は window.devicePixelRatio を通じて取得できます。 CSS では、-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio、および -webkit-max-device-pixel-ratio を使用してメディア クエリを実行し、異なる DPR を持つデバイス用のスタイルを作成できます。適応 (これは、Webkit コアを備えたブラウザーと Web ビューのみに適用されます)。

dip または dp、(デバイスに依存しないピクセル、デバイスに依存しないピクセル) は画面密度に関連します。 dip を使用すると、網膜デバイスと非網膜デバイスを区別するのに役立ちます。

ご存知のとおり、iPhone6 のデバイスの幅と高さは 375pt * 667pt であり、デバイスの独立したピクセルとして理解でき、その dpr は 2 です。上記の式によれば、簡単に知ることができます。物理ピクセルは 750pt * 1334pt であること。

特定の要素の CSS スタイル:

width: 2px; height: 2px;

異なる画面では、CSS ピクセルによって表示される物理サイズは同じですが、違いは CSS ピクセルに対応する物理ピクセルの数です矛盾しています。通常の画面では、1 CSS ピクセルは 1 物理ピクセルに対応しますが、Retina 画面では、1 CSS ピクセルは 4 物理ピクセルに対応します。

詳細については、ここをクリックして詳細をご覧ください。

これを見ると、モバイル端末の時代では、レイアウトに加えて、画面の適応もページの表示品質に直接影響するため、画像の適応を考慮する必要があることがわかります。画像の適応を実現する方法については、次のとおりです。あまりにも詳しく説明しすぎます。以下は、mir.aculo.us に基づいて @南宫瑞阳 によって翻訳されたインフォグラフィックです:

メタ タグ

タグにはさまざまな種類がありますが、ここで注目したいのはメタ タグです。これは主に、標準化された方法で Web ページをレンダリングする方法をブラウザに伝えるために使用され、ウィンドウの大きさをブラウザに伝える必要があります。モバイル ページを開発する場合は、次のようにメタ タグを設定する必要があります:

コードは、Web ページが表示される画面の幅によってウィンドウの幅が定義されます。ページの縮尺と最大縮尺は 100% に設定されます。後の解決策ではメタ タグに大きく依存する必要があるため、保留のままにしておきます。

CSS ユニット rem

Rem は、W3C 仕様で次のように説明されています:

ルート要素のフォント サイズ。

簡単に理解すると、rem はルート要素 のフォント サイズを基準にして計算されます。私たちのソリューションでレム単位を使用すると、 のフォント サイズに基づいて要素のボックス モデル サイズを簡単に計算できます。そして、この機能は私たちにとって特に有益です。

フロントエンド実装ソリューション

これまでの関連概念をいくつか理解した後、実際のソリューションを見てみましょう。モバイル淘宝チーム全体には lib-flexible というライブラリがあり、このライブラリは H5 ページのターミナル アダプテーションを解決するために使用されます。

lib-flexible は、H5 適応を行うためのオープンソース ライブラリです。ここをクリックして関連ファイルをダウンロードし、必要な JavaScript および CSS ファイルを入手できます。

もちろん、Alibaba CDN を直接使用することもできます:

コード内の {{version}} を対応するバージョン番号 0.3.4 に置き換えます

次の作業は美化作業です。

特定のスタイルを記述する前に、最初に理解する必要があるいくつかの点があります:

ビジュアル ドラフトの px を rem に変換します

まず第一に、現在の日常業務において、ビジュアル デザイナーは次のサイズを与えます。フロントエンド開発者へのビジュアル ドラフト 通常、幅 640 ピクセル、750 ピクセル、および 1125 ピクセルに基づきます。それともなぜですか？誰もが理解する必要があります（Retina スクリーンを考慮してください）。

記事冒頭のサンプルデザイン案と同様、750pxをベースにデザインしています。そこで問題は、デザインドラフトの各要素のピクセルをレムに変換するにはどうすればよいかということです。

当社の工場のビジュアルデザイナーは非常に思慮深く、ビジュアルドラフトに関連する情報をマークするお手伝いをします。

現在、Flexible はビジュアル ドラフトを 100 の部分に分割し (主に将来の vh および vw との互換性を高めるため)、各部分はユニット a と呼ばれます。同時に1rem単位を10aとして認識します。視覚的なドラフトの場合、次のように計算できます: 1a = 7.5px1rem = 75px

次に、サンプルのドラフトは 10a に分割されます。つまり、全体の幅は 10rem で、対応する のフォント サイズは 75px です。

このように、ビジュアルドラフト上の要素サイズの変換には、元のpx値をremのbase値で割るだけで済みます。たとえば、この例のビジュアル ドラフトの画像のサイズは 176px * 176px で、これは 2.346667rem * 2.346667rem に変換されます。

素早く計算する方法

CSSREM

CSSREMは、CSSのpx値をrem値に変換するSublime Text3オートコンプリートプラグインです。このプラグインは @正林 によって書かれました。まずプラグインの効果を見てみましょう:

開発全体でこれらのツールを使用すると、px 値から rem 値への変換が開発効率に影響を与えることを心配する必要はありません。

フォント サイズに rem を使用しないでください

Rem を使用して H5 適応を完了する方法を誰もが目撃したことがあります。それでは、テキストは適応をどのように処理するのでしょうか。 rem を自動適応に使用することもできますか?

明らかに、iPhone3G と iPhone4 の Retina 画面で同じテキスト フォント サイズを表示したいと考えています。言い換えれば、Retina 画面ではテキストを小さくしたくないのです。さらに、大画面の携帯電話でより多くのテキストを表示したいのです。さらに、ほとんどのフォント ファイルには、通常 16 ピクセルのドット マトリクス サイズが付いています。 . と 24px なので、13px や 15px のような奇妙なサイズは必要ありません。

これにより、rem は H5 ページを作成する際の段落テキストでの使用に適していないことがわかります。したがって、フレキシブル アダプテーション ソリューション全体において、テキストを考慮する際の単位として px が引き続き使用されます。 [data-dpr] 属性を使用して、異なる dpr でのテキストのフォント サイズを区別するだけです。

div { width: 1rem; height: 0.4rem; font-size: 12px; // デフォルトでは、 fontSize を dpr = 1 で書き込みます。 [data-dpr="2"] div { font-size: 24px; data -dpr="3"] div { font-size: 36px;

実際の開発では、開発をより容易にするために、 font-dpr() のような Sass ミキシング マクロをカスタマイズできます:

@mixin font- dpr($font-size){ フォントサイズ: $font-size; [data-dpr="2"] & { フォントサイズ: $font-size * 2 } [data-dpr="3" ] & { font-size: $font-size * 3; }}

このような混合マクロを作成した後は、開発時に次のように直接使用できます:

もちろん、これは段落テキストなどの説明テキストのみです。ただし、シナリオに応じてテキストのフォント サイズも変更する必要がある場合があります。たとえば、プロジェクトにスローガンがある場合、ビジネス側はそのスローガンをさまざまな端末に適応できることを望んでいます。このようなシナリオでは、スローガンの測定単位としてレムを使用できます。

実際、H5 適応ソリューションは数多くあり、これに関するチュートリアルもインターネット上に多数あります。どちらの方法にも独自の長所と短所があります。この記事では主に Flexible などのライブラリを使用して H5 ページのターミナル適応を完了する方法を紹介します。 H5 ページの端末デバイス適応にフレキシブル ライブラリを使用することが推奨されるのはなぜですか?その主な理由は、このライブラリがタオバオで 1 年近く使用されており、比較的安定した状態に達しているためです。さらに、要素の変換方法を考える必要はなく、対応するビジュアル ドラフトに従って直接カットインできます。