移动端界面
基本概念
单位
单位分为绝对单位和相对单位,绝对单位例如m,cm等.相对单位例如px.
英寸inch = 2.54cm
屏幕尺寸：指屏幕的对角线的长度，单位是英寸,常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等.
分辨率屏幕像素密度 (ppi):是px per inch的缩写,一般用在衡量电脑屏幕的清晰显示程度.有一个相识的概念叫 DPI(Dots Per Inch) 一般应用在印刷产品上.
为什么有时候我们说分辨率是1366 x 768?
显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。
图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。
像素 (px): 由ppi概念,会知道像素其实并不是一个绝对单位,而是一个相对单位.
CSS像素: CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备独立的像素(device-independent pixel)，简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。
物理像素 (physical pixel):物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
***设备像素比 (dpr) :是 device pixel ratio的简写.其定义了物理像素和设备独立像素的对应关系。在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于4个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。
设备像素比 ＝ 物理像素 / 设备独立像素
总结:
屏幕尺寸、屏幕分辨率-->对角线分辨率/屏幕尺寸-->屏幕像素密度PPI
|
设备像素比dpr = 物理像素 / 设备独立像素dip(dp)
|
viewport: scale
|
CSS像素px
viewPort理解
概念
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为****浏览器可视区域的宽度是比这个默认的viewport的宽度要小的***。
注意
css中的1px并不等于设备的1px,具体原因见上文"物理像素"与"css像素".
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
理解
为了方便理解原理:viewport分为layout viewport、visual viewport 和 ideal viewport 三类，其中浏览器默认的 viewport 叫做 layout viewport. 表示浏览器可视区域的大小的 viewport 叫做 visual viewport.而 ideal viewport是最适合移动设备的viewport，ideal viewport 的宽度等于移动设备的屏幕宽度，只要在 css 中把某一元素的宽度设为 ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对 ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
利用meta标签对viewport进行控制
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。
该 meta 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让 viewport 的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认 viewport，也就是说会出现横向滚动条。
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。
缩放问题
首先我们我们需要知道缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是320px，如果我们设置 initial-scale=2 ，此时 viewport 的宽度会变为只有 160px了，这也好理解，放大了一倍嘛，就是原来1px的东西变成2px了，但是1px变为2px并不是把原来的320px变为640px了，而是在实际宽度不变的情况下，1px变得跟原来的2px的长度一样了，所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此，我们可以得出一个公式：
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度 / visual viewport宽度
ps: visual viewport的宽度指的是浏览器可视区域的宽度。
现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是1，因为当 initial-scale = 1 时，当前的 layout viewport 宽度会被设为 ideal viewport 的宽度，但前面说了，各浏览器默认的 layout viewport 宽度一般都是980啊，1024啊，800啊等等这些个值，没有一开始就是 ideal viewport 的宽度的，所以 initial-scale 的默认值肯定不是1。安卓设备上的 initial-scale 默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。
根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给 layout viewpor 设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算 initial-scale 这个值，以保证当前 layout viewport 的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。比如说，在iphone上，我们不设置任何的 viewport meta 标签，此时layout viewport 的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：
当前缩放值 = 320 / 980
也就是当前的 initial-scale 默认值应该是 0.33 这样子。当你指定了 initial-scale 的值后，这个默认值就不起作用了。
*** 总结:*** 在iphone和ipad上，无论你给 viewport 设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。
总结
什么都没搞清楚,没关系,会设置viewPort就可以了!
第一种情况
此时给元素设置100%宽度,表示元素宽度为手机设备尺寸宽(ideal viewport),不是物理像素宽,而是css像素表示的宽度.
第二种情况
固定viewport宽,此时不可以设置initial-scale,max-scale和min-scale,利用手机的自动缩放来使用手机屏幕,此时元素100%宽度,表示设置的固定宽度.
更多viewport知识
设计尺寸篇
- 画布尺寸：
新建750×1334 分辨率72，像素/英寸(PPI/DPI,另外DPR就是我们说的像素比,retina屏为2)。
蓝景普通移动端 640×1334 安全区域640×1030
- 常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
- 字体：
中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。
pt就是point，是印刷行业常用单位，等于1/72英寸,绝对长度"磅"。
PPI和DPI概念一样为像素数量每英寸(像素/英寸),算法为宽度方向物理像素的平方加上高度方向物理像素的平方,开根号,再除以屏幕对角英寸(即屏幕大小,例如5.5英寸);
1pt表示1/72英寸,表示的px值为DPI/72;即1pt = (DPI/72)px
1px表示1/DPI英寸,表示((1/DPI)/(1/72))pt,即1px = (72/DPI)pt
这里如果设计图的DPI为72像素/英寸,那就表示1px = 1pt
//ios开发里单位是pt, px = pt * DPI / 72 (这个时别人总结的,好像反了)
//750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。
- 界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
- 界面上的间距和元素尺寸：
以偶数为单位，不清楚的可以截图量大公司的APP界面作为参考。
- 750 x 1334 设计稿尺寸：
状态栏高度：40 px
导航栏高度：88 px
标签栏高度：98 px
- 设计稿实时预览：
安装一个Ps Mirror可以在iphone上实时观看效果。
- 标注工具： 需先安装adobe air
马克鳗
PxCook 像素大厨
Parker标
一键标注神器－zeplin