HTML によるモバイル端末向けのレイアウト ソリューションとは何ですか?

最近、淘宝網、天猫、NetEase Lottory 163 の WAP ホームページ スタイル レイアウトを研究しました。今日は、いくつかのモバイル レイアウト プランを要約し、使用されているテクノロジーの長所と短所を分析します。

注: コードはファイル プロトコルを使用して実行されます。ローカル ファイルへの参照は Chrome ではサポートされていないため、Firefox または Safari で開くことができます

wty2368

計画

淘宝、天猫、NetEase Lottory 163 の wap ホームページ スタイルのレイアウトを研究し、モバイル レイアウト計画を要約しました
注: コードはファイル プロトコルを使用して実行されますが、Chrome ではローカル ファイルへの参照がサポートされていないため、クロスドメイン エラーが発生します。 Firefox または Safari で開くことができます

当時作成された ppt ダウンロード: 2015 年 12 月のモバイル レイアウト計画に関する研究

1. 物理ピクセル1. 物理ピクセルは最小の物理ピクセルです。ディスプレイ上の表示単位 (携帯電話の画面)

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

デバイス非依存ピクセル (密度非依存ピクセルとも呼ばれます) は、コンピューター座標系の点として考えることができます。 point は、プログラムで使用できる仮想ピクセルを表します (例: CSS ピクセル)

3. ビットマップ ピクセル

ビットマップ ピクセルは、ラスター画像 (png、jpg、gif など) の最小データ単位です。 ）。各ビットマップ ピクセルには、独自の表示情報 (表示位置、色の値、透明度など) が含まれています。

4. デバイス ピクセル比 (dpr と呼ばれます)

デバイス ピクセル比 = 物理ピクセル / デバイス独立ピクセル (特定の方向、x 方向または y 方向)

5. スケール

スケール比:

scale = 1/dpr

6. NetEase Lottery の設計計画

NetEase Lottory

を使用して書き込みますビューポート

メディアクエリ

を使用して、HTMLルート要素の

font-size

値、つまりrem値

rem + パーセントレイアウトを決定しますメディアクエリのCSSコードは次のとおりです:

<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />

3. Tmallデザインプラン

日 猫のホームページ

は、スケール= 1.0のハードコーディングされたビューポートを採用

、レムを使用せず、本体のフォントサイズ= 14pxはハードコーディングされています

px + フレックスボックスレイアウト

4. 遭遇した問題点

1. 高精細画面(dpr>1) 1pxの線ボケ問題

デザイナーが様々なサイズの原稿を制作する場合、多くの場合、まず大きいサイズ(通常は2倍)の原稿を描き、その後縮小していきます。サイズを指定して、最後にエクスポートします。 これにより問題が発生します。デザイナーが 2x 原稿に 1px の線 (たとえば、border: 1px) を描画した場合、それをscale=1.0 で表示したい場合、線は 0.5px となり、非常に大きくなります。一部の携帯電話では表示できません。 0.5pxを描画します。

理論的には、1 ビットマップ ピクセルは 1 物理ピクセルに対応するため、画像は完全かつ鮮明に表示されます。通常の画面では問題ありませんが、Retina 画面 (dpr=2) ではビットマップのピクセルが不足し、画像がぼやけてしまいます。

2. 高解像度画面 (dpr>1) での高解像度画像のぼやけの問題

dpr=2 の Retina 画面の場合、1 つのビットマップ ピクセルはそれ以上分割できないため、4 つの物理ピクセルに対応します。 , そのため、最も近い色しか選択できないため、画像がぼやけてしまいます (上記の色の値に注意してください)。したがって、高解像度の画像の問題に対しては、2 倍の画像を使用する方が良い解決策となります。例: 200×300 (CSS ピクセル)

img タグ
の場合は、400×600 の画像を指定する必要があります。

dpr=2 の Retina スクリーンの場合、1 つのビットマップ ピクセルは 4 つの物理ピクセルに対応します。単一のビットマップ ピクセルはそれ以上分割できないため、最も近い位置からしか色を取得できず、結果として画像がぼやけてしまいます (上記の点に注意してください)。 ) カラー値)。したがって、高解像度の画像の問題に対しては、2 倍の画像を使用する方が良い解決策となります。例: 200×300 (CSS ピクセル) img タグの場合、400×600 の画像を指定する必要があります。

5. 究極の解決策 --> タオバオデザインプラン

タオバオホームページ
js処理を通じて携帯電話のdprパラメータを取得し、視点を動的に生成します

携帯電話の物理ピクセル幅を取得し、 10等分して各部分の幅はレムの大きさになります。

デザイン案のサイズ(px)に応じて、px + remレイアウトを使用して3つの状況で処理されます

関連するスクリプトは次のとおりです:

//网易彩票的响应式布局是采用媒体查询来改变rem值实现的
//媒体查询css#media-query{
    @media screen and (min-width: 240px) {
        html,body,button,input,select,textarea {
            font-size:9px!important;
        }
    }
    @media screen and (min-width: 320px) {
        html,body,button,input,select,textarea {
            font-size:12px!important;
        }
    }
    @media screen and (min-width: 374px) {
        html,body,button,input,select,textarea {
            font-size:14px!important;
        }
    }
    @media screen and (min-width: 400px) {
        html,body,button,input,select,textarea {
            font-size:15px!important;
        }
    }
    // 省略
}

6. デザイン案の概要

より上記の分析から、理解するのは難しくありません。

NetEase Lotry のソリューションはすぐに開始でき、開発効率が高く、互換性も優れていますが、十分な柔軟性と精度がありません。

Tmall の設計アイデアは比較的シンプルで、フレックスボックスは非常に複雑です。柔軟性はありますが、フレックスボックスの互換性は慎重に扱う必要があり、十分な精度がありません

タオバオのソリューションは、モバイル端末が遭遇するほぼすべての問題を解決し、完璧なソリューションですが、開発効率が低く、コストが比較的高くなります。 。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

HTML でスクロール バーを使用するためのヒントは何ですか?

html は 2 秒で他のページにジャンプします

トリガー メソッドを使用して、クリックせずにファイル選択ダイアログ ボックスをポップアップする方法ファイルタイプ入力

タグ内の他の属性を非表示にして画像のみを表示する方法

以上がHTML によるモバイル端末向けのレイアウト ソリューションとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。