文章阅读时长：大约6分钟
此篇讲一下常见的页面适配规范，即UI稿在不同型号设备上的表现效果。
选择一、全局等比缩放
表现：把UI稿上的所有间隔、字体大小、宽高等，以屏幕宽度为准，按比例放大。
个人评价：简单粗暴，越大屏幕手机越显粗糙，图片等资源容易失真，市场上比较少App用这种。
选择二、按不同控件分别适配
1、图标尺寸固定，间距自适应：
(此适配方式实现成本较低，在各大机型中表现良好，各大App皆有采用。)
如xhs这个例子，中间三个icon的宽度在任何屏幕下都是48，随着屏幕宽度变大，icon间的间隔变大；
elm这个例子也是一样，图标尺寸固定，间距自适应；
2、等比例缩放：
用等比例缩放元素控件的宽高，常用于banner图、视频预览图等。
3、弹性适配：
以xhs搜索列表为例，每行Item分PartA、PartB两个部分，其中间留白部分根据屏幕宽度弹性变化，其他属性如字体、高度等不变。（弹性适配需要注意好PartA右边不要超过PartB左边，现在一般列表型的控件，都用此种适配方式）
4、文字适配：
以具体情况分别适配，如要展示完整文字的就不限定行数、限定行数超过就以省略号结尾的。
-
1、相同的文字，屏幕越宽，行数越少。(代码本质上，就是Text控件左右两边与屏幕固定15间距，超过自动换行)
-
2、限定行数，如只能展示一行，超出的以...结尾。
5、图片适配：
图片适配的实现代码里，一般有完整展示图片且填满控件、等比缩放展示完整图片、等比缩放填满控件等。
-
1、完整展示图片且填满控件。此适配方式不管是横图还是竖图都能完整展示，缺点是会拉伸图片
-
2、等比缩放展示完整图片。这种适配方式可以让图片完整展示，也不会被拉伸，但是控件没有撑满，有留白现象；
-
3、等比缩放填满控件。这种适配方式能让图片比例正常，也不会留白，但是超出的部分会被截掉。在图片适配中最为常用。
6、多元素适配：
页面上要展示多个重复/不重复元素时，该如何适配。 以苹果官方的适配方式为例，元素高度、宽高比例一定，大屏手机展示更多的元素数量。
网友评论