对手机端的概念

总结

1.英寸
大概2.54cm
5.5英寸 对角线

2.像素
图像最小的不可分割单元

3.分辨率
01：720X1280
02：750X1334
横向容纳750个像素点
纵向容纳1334个像素点
4.ppi
01：pixcel per inch
像素每英寸
02：每英寸像素点的数量
电子设备 72
打印小文件 300
宣传栏 1500-200

5.dpi
在手机上 每英寸 容纳的点大小
dot per inch

6.视网膜屏

Retina 屏 dpi (dot per inch) 超过300的屏幕

7.ios
01：单位pt点
换算像素px
iphone 5/6/7 1：2
iphone 5 6 7 plus 1：3
iphone x 1：3

02:常见尺寸
状态栏20pt
导航栏 44pt
列表44pt
底部 49pt
列表图标/分段器 29pt
switch w51 h31 r28

03:常见间距
8pt
15pt

04:常见文字
标题 17pt
正常 13pt
最新 10pt

08:前端如何运用尺寸
1.设计师的设计稿
750X1334 2倍
720X1280 2倍
1242X2208 3倍
1080X1920 3倍

2.尺寸的安排方式
如果以像素为单位
设计稿子尺寸/倍数
设计稿 ：88px height： 44px @2倍
设计稿 ：60px height： 20px @3倍
以rem为单位
1.flexable.min.js
2.修改设计稿的宽度
3.尺寸
设计稿的尺寸/100+rem
高88px
写0.88rem