开发过程中的UI差异(flutter版)

开发过程中的UI差异(flutter版)

一个App的从无到有一定绕不开UI的还原问题，通常有设计师设计好根据时下主流的机型产出UI稿交于开发人员去还原视觉稿。比如设计稿的规范为：375(width)667(height)。通常开发人员按照设计稿设置的控件（10040）以及字体fontSize：18。但是经常会有设计师来说，怎么Android和iOS上面的表现形式不一样呢？或者怎么oppo上面的字号显得比较大呢？其实，底层逻辑都是由于物理设备到开发语言的映射差异化导致的。

原理介绍

几个名词

屏幕尺寸

屏幕尺寸(screen size)，是屏幕的对角线长度，一般讲的大小单位都是英寸。

DPI (dots per inch)

　　dpi 是（英文Dots Per Inch）（每英寸所打印的点数）的缩写，是打印机、鼠标等设备分辨率的单位。国际上都是计算一平方英寸面积内像素的多少。这是衡量打印机打印精度的主要参数之一，一般来说，该值越大，表明打印机的打印精度越高。如果对于扫描设备，dpi越大，则采样点越高，扫描的图片越清晰。 　　可以理解为像素的密度，即单位面长度上的所打印点的数量。

PPI (pixels per inch)

　　PPI (pixels per inch)（每英寸的像素数量）的缩写，也就是像素密度。

PPI=√（X^2+Y^2）/ Z （X：长度像素数；Y：宽度像素数；Z：屏幕大小）

关于像素

像素是计算机设备显示的基本单位，它可以表示图形尺寸的大小。英文名为Pixel，简写为PX。

相同的分辨率，则PPI高的的设备，图片显示起来（物理尺寸）更小。

相同的物理尺寸，PPI低的设配，分辨率低。

简单的来说，图像分辨率(每英寸像素数)和PPI(每英寸点数)两者相互影响。