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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

php中世界最好的语言

Feb 22, 2018 am 09:15 AM

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 サイトの他の関連記事を参照してください。