レイアウトビューポート、ビューポート、理想的なビューポート

モバイル開発

1.物理画素：

ディスプレイは1つの発光点からなり、1つの発光点は赤緑青の3原色からなり、1つの発光点は1物理画素(physical pixel)であり、デバイス画素(dp:device pixel)とも呼ばれることが知られている.

2.論理画素：

論理画素(logical pixel)、css画素、すなわち開発で使用した画素pxと呼ばれる.

3.デバイス画素比（dpr：device pixel ratio）：

計算方法:dpr=デバイス画素/CSS画素(スケーリング比が1の場合)、dpr>1の我々はいずれもハイビジョンスクリーンと考えることができる

4. PPI：(Pixels Per Inch)

1インチあたりの物理的なピクセルポイントは、ピクセル密度とも呼ばれ、1インチあたりのピクセル数を表します.したがって、PPI値が高いほど、表示画面がより高い密度で画像を表示できることを示す.もちろん,表示密度が高いほど擬真度が高くなる.

5.二倍図

1枚のcss画素のピクチャー、携帯電話の中で開けて、物理画素の比によって倍数を拡大して、ピクチャーのぼやけをもたらすことができて、だから私達は倍図を使ってピクチャーの品質を高めて、高スクリーンの設備の中のぼやけた問題を解決します

     ，1 css    1       
         ，1 css    2       
        ，           2 ，  50 * 50         100 * 10
    
    ：
               50*50   ，     dpr，   2，     100*100   ，  
      css      50*50，        ，        2 ，  100*100，     
        100*100，      

6.CSS 3ケースモデルbox-sizing

箱の寸法を内容に準ずるか枠に準ずるかを設定する

.

w 3 cケースモデル:content-box幅計算:ケース幅=CSSで設定されたborder+width+padding

css 3ボックスモデル:border-box幅計算:ボックス幅=CSSに設定されたwidthにはborderとpadding

が含まれています.

注意:移動端はすべてCSS 3ボックスモデルを使用することができ、PC端は互換性が必要であれば、従来のモードを使用し、互換性を考慮せず、CSS 3ボックスモデル

を使用する.

7.単独でバージョンを移動するページのレイアウト方法

移動先ページを個別に作成(メインストリーム)

フローレイアウト(パーセントレイアウト)

flexフレックスレイアウト(強く推奨)

less+rem+メディアクエリーレイアウト

ハイブリッドレイアウト

8レイアウトビューポート、ビューポート、理想的なビューポート

1.レイアウトビューポート

レイアウトビューポートは画板として理解できます.つまり、紙はこれだけしかありません.A 4紙に等比して清明上河図を描きたいなら、明らかに溢れてしまいます.

2.ビューポート

ビューポートはブラウザの幅です.ただPC側では、ブラウザウィンドウが勝手にサイズを変えることができ、直感的に見ることができます.Client側では、ほとんどの携帯電話やタブレットのブラウザではブラウザの幅を変えることはサポートされていないので、ビジュアルビューポートは画面サイズです.

3.理想的なビューポート

レイアウトビューポート幅=ビジュアルビューポート幅=デバイス幅(=コンテンツ幅)

開発者は、開発中にコンテンツの幅がレイアウトビューポートの幅を超えてはならないことを規定します.