day 18移動端

1.移動端

1）metaラベル：

レイアウトビューポート(viewport):cssが作用するビューポートで、デフォルト値の幅は980 px

です.

ビジュアルビューポート:デバイス幅に対応する範囲

パーフェクトビューポート:レイアウトビューポート=ビジュアルビューポート

initial-scale(初期スケール)1非スケール

minimum-scale:ユーザーが縮小できる最小スケール(デフォルトは1.0)

maximum-scale:ユーザーが縮小できる最大スケール(デフォルトは1.0)

user-scalable:ユーザーが手動でスケールできるかどうか(デフォルトはnoです.縮小ページを拡大したくないためです)

2）移動端パラメータ

1)物理画素(ps量で取り出した値)2 px
2)論理画素(css設定値)1 px
3)dpr(論理画素比)=物理画素/論理画素

320設計図dpr=1;

640/750設計図dpr=2;

750設計図dpr=3;

注意:モバイル端末iphone 4およびその後、超網膜ハイビジョンスクリーン(Retiaスクリーン)が出現し、ps量で取り出した値と本当に設定する値が一致しないため、dprが発生する

3）移動端単位

em:1 emのデフォルトは16 pxです.フォントサイズ設定emは、親要素のフォントサイズを参照し、他の属性設定em単位であれば、参照する現在の要素のフォントサイズ

である.

rem:1 remデフォルト値16 px;rem単位を設定するすべてのプロパティは、参照ルート要素htmlのフォントサイズ

です.

vw(ビューポート幅)/vh(ビューポートの高さ)100 vw=100%ビューポート幅

4）移動端準備作業（ポイント）

(1)metaのviewportタグの設定
(2)設計図の大きさからdprの値を判断し、ps量で取った値とdprの値から対応するcss画素を算出し、psの中でdprに基づいて画像の大きさ、画像-』の画像の大きさを直接修正することができる(幅を設定すればよい、高さは等比例でスケールする)
(3)設計図の幅からルート要素のフォントサイズを算出する
例えば、設計図のサイズは750 pxです.設備幅は375 pxである.100 vw=375 pxである.1rem = 100px;
導出:1 rem=26.667 vw,vwはデバイス幅に従って変化し,ルート要素に設定され,rem単位に使用される要素はルート要素に従って変化する

html{font-size:26.667vw;}

(4)bodyのフォントサイズをリセットbody{font-size:16 px}
(5)正常量は設計図をとり、正常に画素単位を設定し、全体を書き終わった後、cssコードを選択し、alt+zをrem単位に変換する