关于移动端各平台字号研究（px\pt\dp\sp）
关于移动端平台的字号研究，仅供参考与观者进行交流沟通用，接受批评与指导。
最近在研究移动端的设计规范问题，在网上找到的大多设计规范并没有一个对字号在不同设备下的说明，然而移动端的出现，web端设计规范对于字号的规定已经不再适用于移动端。所以我做了一些基本了解，写下这篇文章，希望能帮到一些朋友。
先了解一下，对不同的单位定义
px : 最常用，也是接触的最基本的度量单位，但是移动端并不使用这个单位作为字号的单位，但是依旧是最重要的一个换算单位；
pt : 全称point,中文意思为“点”，也有翻译叫“磅”，注意！划重点：iOS中的pt单位和Photoshop中的pt单位概念相同，但是并不等价。 简单理解，Photoshop中的pt是用来映射印刷设备，1pt印刷出来是1/72 inch（inch理解为 英寸，物理尺寸）；iOS的pt主要用来映射屏幕，为iOS开发基准单位；
dp : 全称density-independent pixel与密度无关的像素，一种基于屏幕密度的抽象单位。在每英寸160点（160ppi）的显示屏上面，1dp = 1px；
dp 与 px 的换算公式：dp * ppi / 160 = px 。比如1dp x 320ppi/160 = 2px。
sp : 全称scale-independent pixel，与刻度无关的像素（官方直译：可缩放像素）与dp类似，是安卓的字体单位，在每英寸160点（160ppi）的显示屏上面，1 dp = 1 px ；
sp 与 px 的换算公式：sp * ppi / 160 = px 。比如 1sp x 320ppi/160 = 2px。
现在我们接着说密度单位：
上面刚刚提到了ppi这个概念，ppi（pixels per inch）：图像分辨率（在图像中，每英寸所包含的像素数目），说白了就是每英寸物理屏幕上面有多少个点，点越多图像就越细腻，点越少图像越模糊，可以脑补一下非智能机时期的手机屏幕和iPhone X的屏幕对比，图像显示差异的原因就是在于iPhone X每英寸物理屏幕上的点比非智能手机时期的手机多得多（但是这里只是为了更容易了解ppi这个概念，每家公司对屏幕的校色不同，会有色彩差异）；
（其实Android没有ppi这个概念，对应的是Device pixel ratio，翻译过来就是屏幕密度，两者是相等的，但是大部分Android工程师们基本上不会跟设计说这个，容易说多了反而乱套，让设计师们不知所云）
还有一个单位是dpi（dots per inch）：打印分辨率（每英寸所能打印的点数，即打印精度），主要是应用于输出，重点在打印设备，就是PS创建新的文档所指示的分辨率。（可以去ps上新建文件，然后在参数中找到分辨率，正常网页都是72/印刷可能会用到144或者300等其他不同分辨率）
我们在移动应用中提到的ppi和dpi其实都一样，只是概念不同，这里只说移动端，所以忽略dpi，只聊ppi：
ppi = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数
举个例子：iPhone 8的ppi是多少
ppi = √（1334²+750²）/ 4.7 in =325.61228322... ≈ 326ppi
这里就表示了ppi和px的关系。（公式里面有一个4.7 in这个数，in在这里代表英寸，指的是用户感受到的手机屏幕真正的物理尺寸大小）
说了这么多：
现在说一些设计相关的关键内容：
上面了解了px\pt\dp\sp的概念，还有ppi和dpi的概念，以及ppi与px的关系。
那么，px\pt\dp\sp之间的关系应该如何换算呢？
核心依旧在于px，我们设计的时候依旧使用px为基础媒介进行换算（开发哥哥也这么算）
iOS部分
iOS开发只有一个单位，pt，我们现在做移动端设计使用sketch的比较多，在它的设计模板里面，iPhone 8中的设计尺寸为375*667，属于逻辑分辨率，实际设备分辨率为750*1334，ppi为326，物理尺寸为4 inch，我们设计不需要管这么多，只需要明白，在375*667尺寸下 ：1 px = 1 pt。
现在iPhone X出现后，设备渲染后分辨率为1125*2436，逻辑分辨率为375*812，ppi为258。这就意味着，除去下巴的功能区域，iPhone X与4.7 inch的iPhone 8同宽，但是高度多了145pt，导致垂直高度多出了大约20%，对设计的布局有所影响，对于字号没有影响，但是由于我们所知的ppi并不是完整的准确，而是一个约等的数字，从严密的理论角度来说，我们最后所在iOS设备上所见到的并不是精准完美还原的设计稿，但是这些细微的差异在如此高分辨率下肉眼几乎不可见。简单点就是不用管它。
iOS11的设计规范中，在官方提供的字体前提下，给出了一些字号、行距、字距的建议，基于动态类型大小尺寸，一共提供了七种不同的视觉需求下的不同字号大小，而且针对一些具有应用需求的用户提供了更大的字号类型，一共五种。这里我只列出默认尺寸的推荐字号大小：
| 类型 | 字重 | 字号（pt） | 行距（pt） | 字距（pt） |
| 大标题 | 常规 | 34 | 41 | 11 |
| 一级标题 | 常规 | 28 | 34 | 13 |
| 二级标题 | 常规 | 22 | 28 | 16 |
| 三级标题 | 常规 | 20 | 25 | 19 |
| 内容提要 | 半粗体 | 17 | 22 | -24 |
| 正文 | 常规 | 17 | 22 | -24 |
| 插图编号 | 常规 | 16 | 21 | -20 |
| 副标题 | 常规 | 15 | 20 | -16 |
| 脚注 | 常规 | 13 | 18 | -6 |
| 一级说明文字 | 常规 | 12 | 16 | 0 |
| 二级说明文字 | 常规 | 11 | 13 | 6 |
这是iOS11官方设计规范文档中，默认字体字号尺寸的建议，更多排版内容内容详见iOS11视觉规范-排版
（至于如何在设计稿中进行换算应用上文已经提到，不在此多做赘述）
Android部分
Android有两个单位，一个是dp，一个是sp，它们与px之间的换算公式是一样的，但是Android标准是sp用来作为字号尺寸单位主要用于字体显示best for textsize，dp用来作为其他图片等内容的单位。
关于sp的文档描述：Scale-independent Pixels – This is like the dp unit, but it is also scaled by the user’s font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user’s preference.
sp除了受屏幕ppi影响意外，还受到用户的字体大小影响，通常情况下，建议使用sp来跟随用户字体大小设置。直观表现就是，sp作为字体大小单位，会随着系统的字体大小而进行改变，但是dp不会。
Android和iPhone最大的差别在于，Android机型种类繁多，平台多样化，主流的屏幕尺寸有hdpi(480*800) \ xhdpi(720*1280) \ xxhdpi(1080*1920)。在xhdpi下，设计稿尺寸为720*1280，那么：1 px = 0.5 sp = 0.5 dp。
不准确的说法，可以直接当成iPhone的@2x图来理解，还有一个 sp / dp / px 在线转换工具 可以看看，动手换算一下，加深理解。现在还没有办法可以让开发绝对精准的还原每一个点，因为对于多端多平台的Android来说，显然这是个不太可能，但是我们明白原理以后可以在最大程度上，在更多屏幕尺寸下还原一个肉眼无差别设计稿，并且在设计的时候有一个基础字号守则。
在Material design中，官方对于风格版式有一些指南，音文字体为Roboto（6种字重）、中文为Noto（7种字重），官方给出的最基本的样式集合就是基于 12、14、16、20 和 34 sp的字体排版缩放，尽量避免奇数和小数，容易造成精度丢失，小于12sp的字体会太小导致用户看不清楚。更多字体字号的内容请参考官方material design文档。
web APP部分
web APP下段落字体仍然使用px为单位，因为更大的屏幕是为了展示更多的内容，段落字号只要是一个适合阅读的大小就可以，当然会有一些特殊的需求，比如标题之类的内容，可能会使用em来表示字体比例，当然最好你所用到的字号是倍数关系，最小倍数是0.25，这样用em去做比例的时候会更容易些。
对于设计稿画布的尺寸选择，通常只考虑宽度，可以设置为640、720、750、1080之类的宽度，尽量提前和开发沟通好，他们习惯使用哪种宽度进行开发，然后用正常的px标注发给开发就可以了。
最终，了解这些内容，一方面是为了让自己在做设计的时候保持心中有数，也在一定程度上满足和开发的无障碍沟通，和工程师大牛们有一个愉快且流畅的交流。
引用：
iOS11 人机界面指南 https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
material desgin官方设计文档 https://material.io/
还有一个不错的关于web APP参考的文章 https://github.com/xwcoder/xwcoder.github.com/issues/8
