2024年3月30日发(作者：梅雨)
从原理开始介绍一下移动端设计尺寸规范
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。
我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理
说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。
现象
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，
你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还
有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334,
1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能
正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实
际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发
出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比
例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是
640x960。刚好两倍，然而两款手机都是3.5英寸的。
所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这
项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定
长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示
效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
倍率与逻辑像素
再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设
计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特
别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上
就会小到根本看不清字。
在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素
使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。
导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。
在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带
@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要
图片准备好，iOS会自己判断用哪张，Android道理也一样。
由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone
6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻
辑像素相同，它们的显示效果就是相同的。
2024年3月30日发(作者：梅雨)
从原理开始介绍一下移动端设计尺寸规范
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。
我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理
说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。
现象
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，
你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还
有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334,
1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能
正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实
际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发
出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比
例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是
640x960。刚好两倍，然而两款手机都是3.5英寸的。
所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这
项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定
长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示
效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
倍率与逻辑像素
再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设
计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特
别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上
就会小到根本看不清字。
在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素
使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。
导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。
在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带
@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要
图片准备好，iOS会自己判断用哪张，Android道理也一样。
由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone
6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻
辑像素相同，它们的显示效果就是相同的。