前端移动端页面与手机尺寸和分辨率的关系

概念

1. 英寸
   1英寸 大概2.54cm
   5.5英寸 指的是手机对角线

2. 像素
   . 　一个屏幕都是由一个一个像素组建而成的，每个像素都对应一个小点。我们常见的 640*960 像素就说明了一个屏幕中包含了多少个小点（像素点），640列与960行像素点，乘一下就知道有多少个了，反正很多很多个。没错，手机中显示的任何图形和图像都是由这些小点组成。

3. 分辨率
   .、 720x1280
   . 、 750x1334 横向容纳750个像素点 纵向容纳1334个像素点

4. ppi
   — pixcei per inch 像素每英寸
   每英寸像素点的数量
   电子设备72
   打印小文件 300
   宣传栏 150-200

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

6. 视网膜屏
   . Retina屏 dpi(dot per inch)超过300的屏幕

7. 单位pt
   换算像素px
   iphone 5/6/7
   1:2
   iphone 5 6 7plus
   1:3
   iphonx
   1：3

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

9. 常见间距
   8pt
   15pt

10. 常见的文字
    标题17pt
    正常13pt
    最新10pt

11. 前端如何运用
    设计师的设计稿
    750x1334
    2倍
    720x1280
    2倍
    1242x2208
    3倍
    1080x1920
    3倍
    看网上

12. 尺寸安排方式

如果以像素为单位
 设计稿子尺寸/倍数
设计稿：88px
写height:44px @2倍
设计稿：60px
写height：20px@3倍
- 以rem为单位