在【起点学院】，我们汇聚了BAT实战派产品总监，手把手带你系统学习产品与运营知识，让你成为优秀的产品经理。
手机适配，这个词汇在业界早已耳熟能详。然而，你是否真正理解其内涵？在众多技术讨论中，常常听到程序员提及：这个需要适配，那个没有适配好……当你进一步追问，他们又能清晰地解释多少呢？自动适配？某种算法？深入探究，往往无果而终。
将此问题抛给设计师，他们可能会回答：你应该问程序员，是他们负责适配的……这样的场景是否似曾相识。
回到正题，究竟什么是手机适配？简单来说，手机适配是指设计师完成效果图制作后，程序员将效果图应用于不同手机屏幕，并针对不同尺寸的屏幕进行界面调整，确保界面在所有设备上均保持原貌，呈现效果图的位置、尺寸和比例。
1. 屏幕物理尺寸：指屏幕对角线的长度。
例如：苹果最新推出的4英寸iPhone SE，其4英寸即代表屏幕的物理尺寸。
iPhone SE屏幕：长度9.0cm、宽度5.1cm
PS：1英寸(in)=2.54厘米(cm)
2. 屏幕分辨率：指屏幕上显示信息的数量，以水平和垂直像素来衡量。
例如：iPhone SE的分辨率为1136×640（像素）。
3. 屏幕密度（pixel per inch）：每英寸的像素数，简称ppi。
例如：iPhone SE的像素密度高达326ppi。
已知iPhone SE屏幕物理尺寸为4寸；通过屏幕分辨率得到屏幕对角线的像素总数；将屏幕对角线的像素总数除以屏幕物理尺寸，即可得到ppi。
屏幕物理尺寸决定了屏幕的实际大小，屏幕分辨率表示屏幕上可显示的像素点数，而屏幕密度则决定了屏幕的精细程度。
已知iPhone SE分辨率为1136×640（像素），设计师可制作一套分辨率为1136×640（像素）的图片；
iPhone SE分辨率为1334×750（像素），设计师再制作一套分辨率为1334×750（像素）的图片
以此类推
让我们看看市场上主流的屏幕分辨率
数据来源：友盟指数
如此众多的分辨率，如何一一制作图片呢？
敏锐的同学可能已经注意到，屏幕分辨率基本符合17/9比例。
例如：iPhone SE分辨率为1136×640（像素），1136/640»17/9；iPhone SE分辨率为1334×750（像素），1334/640»17/9。
17/9这个比例有一个专门术语，称为长宽比（宽高比），即图像宽度与高度的比值，通常表示为“x:y”或“x×y”，其中的冒号和叉号在中文中代表“比”的意思。
对于相同长宽比的设备，可以使用同一套效果图，通过放大或缩小的方式进行界面调整。尽管引入了长宽比，可以显著减少效果图的数量，但面对众多手机厂商，这个数量仍然较大。
此时，我们需要引入一个物理概念——设备独立像素（device independent pixels），在Android系统中使用，简称dp(dip)。
dp是设备像素，px是屏幕像素，它们之间可以进行换算；1dp表示在屏幕点密度为160ppi时1px的长度，这个定义至关重要。通过该定义，可以计算出每部手机dp与px的关系。
dp与px关系，根据定义，是将手机的ppi/160ppi得出的，而手机的ppi前面已经计算得出。
通过dp与px关系，手机适配变得简单起来，只需处理1x、2x、3x、4x等关系。这些名词大家应该也听过，它们指的是dp与px的关系。此时，无需再纠结于特殊的长宽比，比如iPhone 4s和MEIZU MX2。虽然dp是Android系统中的单位，但将其应用于iOS手机时，在转换为px的过程中，原理是相通的，与系统无关。
目前市场上主流的是2x屏手机，3x屏手机也逐渐流行，即大屏手机。
针对不同的“dp与px关系”，有几种适配方式：
- 根据关系制作多套图。
- 仅制作2x图，对于3x和4x图进行拉伸，图片会一定程度失真。
- 仅制作3x图，对于2x图进行压缩，图片会一定程度的变形；对于4x图进行拉伸，图片会一定程度失真。
- 仅制作3x图，对于2x图进行压缩，图片会一定程度的变形；对于4x图进行拉伸，图片会一定程度失真；对于失真和变形的位置，重新制作图片进行适配。
通过“dp与px关系”结合压缩和拉伸，理论上只需一套效果图就能完成手机适配。若想获得更优的适配效果，则需要更多的图片。看似简单的手机适配，背后却蕴含着丰富的学问。手机适配，现在你应该有了更深入的理解。
本文由 @jxwsina 原创发布于人人都是产品经理 ，未经许可，禁止转载。