文章阅读时长：大约6分钟

此篇讲一下常见的页面适配规范，即UI稿在不同型号设备上的表现效果。

选择一、全局等比缩放

表现：把UI稿上的所有间隔、字体大小、宽高等，以屏幕宽度为准，按比例放大。
个人评价：简单粗暴，越大屏幕手机越显粗糙，图片等资源容易失真，市场上比较少App用这种。

选择二、按不同控件分别适配

1、图标尺寸固定，间距自适应：

(此适配方式实现成本较低，在各大机型中表现良好，各大App皆有采用。)

如xhs这个例子，中间三个icon的宽度在任何屏幕下都是48，随着屏幕宽度变大，icon间的间隔变大；

2、等比例缩放：

用等比例缩放元素控件的宽高，常用于banner图、视频预览图等。

3、弹性适配：

以xhs搜索列表为例，每行Item分PartA、PartB两个部分，其中间留白部分根据屏幕宽度弹性变化，其他属性如字体、高度等不变。（弹性适配需要注意好PartA右边不要超过PartB左边，现在一般列表型的控件，都用此种适配方式）

4、文字适配：

以具体情况分别适配，如要展示完整文字的就不限定行数、限定行数超过就以省略号结尾的。

• 1、相同的文字，屏幕越宽，行数越少。(代码本质上，就是Text控件左右两边与屏幕固定15间距，超过自动换行)

• 2、限定行数，如只能展示一行，超出的以...结尾。

5、图片适配：

图片适配的实现代码里，一般有完整展示图片且填满控件、等比缩放展示完整图片、等比缩放填满控件等。

• 1、完整展示图片且填满控件。此适配方式不管是横图还是竖图都能完整展示，缺点是会拉伸图片

• 2、等比缩放展示完整图片。这种适配方式可以让图片完整展示，也不会被拉伸，但是控件没有撑满，有留白现象；

• 3、等比缩放填满控件。这种适配方式能让图片比例正常，也不会留白，但是超出的部分会被截掉。在图片适配中最为常用。

6、多元素适配：