一、移动端尺寸基础知识
1、英寸
英寸是常用的长度单位，在工业领域被广泛使用，很多图纸、铭牌上都是使用英寸作为长度单位。显示设备特别是电视机使用英寸来表示大小，手机屏幕也继承了这个计量单位。
如描述iPhone 4s的屏幕是3.5英寸
2、像素
图像是由一个个小点组成的，这些小点就是像素点。图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的。像素也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象的概念。
3、分辨率
分辨率是屏幕像素的数量，一般用屏宽像素数乘以屏高像素数表示。
描述iPhone 6的屏幕分辨率是750×1334，就是iPhone 6的屏幕是由750列和1334行的像素点排列组成的，每个像素点发出不同颜色的光，构成我们所看到的画面。
在PC时代，分辨率越高，意味着屏幕越大，因为PC具有固定的PPI。但智能手机的屏幕就不是如此了，因为手机的像素密度是不一样的。
4、IOS
1、单位pt点
换算像素px
iPhone 5/6/7
换算： 1:2
iPhone 5/6/7 plus
换算： 1:3
iPhone x
换算： 1:3
2、常见尺寸
常见尺寸
状态栏 20pt
导航栏 44pt
列表 44pt
底部 49pt
列表图标/分段器 29pt
switch w51 h31 r28
3、常见间距
常见间距
8pt
15pt
4、常见的文字
常见的文字
标题 17pt
正常 13pt
最新 10pt
前端如何运用
1、设计师的设计稿
750x1334
2倍
720x1280
2倍
1242x2208
3倍
1080x1920
3倍
看的网上
2、尺寸安排的方式
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果以像素为单位
设计稿子尺寸/倍数
设计稿：88px
写height：44px @2倍
设计稿：60px
写height：20px @3倍
以rem为单位
flexable.min.js
修改设计稿的宽度
尺寸
设计稿的尺寸/100+rem
高：88px
写 0.88rem