全屏页的多机型适配

这里指的是页面内容需在手机一屏内完全显示的情况。

如何保证刚好一屏的设计元素，在各机型都能显示完好？

如下图所示，会员卡展开前、展开后的效果。

展开后的区域分三块。

1. 会员卡区域

2. 间隙+支付按钮

3. 收起按钮+昵称

倘若按照普通的标注方法，定死会员卡的大小尺寸，2、3部分顺延排列。 则有可能出现如下情况。

小屏机内容显示不完全；大屏机留白过多。

小屏机内容显示不完全；大屏机留白过多。

此时可尝试将第3部分的“收起+昵称“区域，以下间距为准定位。那么一定不会飘出屏幕外了。

嗯这样能解决第三部分的显示问题，不会超出屏幕外了。

但，中间夹住的间隙部分，会有可能不够空间。（如下图）

因此，除了第三部分标注以下间距定位以外，会员卡的部分，也需要按照屏幕尺寸等比例缩放。

选定的标准机型需要选择最普适，中间大小的机型，如iphone 8 plus，对比下大机型不会长太多，留有间隙即可。 若会员卡的底色为纯色或者规律底纹（非图案），也可以不一定等比例缩放，仅调整卡片高度即可（这样里面的文案icon需要根据卡片标注，不能跟随完整切图，稍微麻烦些，但效果更好）

综上，底部的模块采用下间距定位，主要模块采用等比自适应的方式，根据屏幕大小调整模块尺寸。 即能保证元素在一屏内，各个机型都显示得完好正常。

2019/9/23