全屏页的多机型适配
这里指的是页面内容需在手机一屏内完全显示的情况。
如何保证刚好一屏的设计元素，在各机型都能显示完好？
如下图所示，会员卡展开前、展开后的效果。
展开后的区域分三块。
会员卡区域
间隙+支付按钮
收起按钮+昵称
倘若按照普通的标注方法，定死会员卡的大小尺寸，2、3部分顺延排列。
则有可能出现如下情况。
小屏机内容显示不完全；大屏机留白过多。
此时可尝试将第3部分的“收起+昵称“区域，以下间距为准定位。那么一定不会飘出屏幕外了。
嗯这样能解决第三部分的显示问题，不会超出屏幕外了。
但，中间夹住的间隙部分，会有可能不够空间。（如下图）
因此，除了第三部分标注以下间距定位以外，会员卡的部分，也需要按照屏幕尺寸等比例缩放。
选定的标准机型需要选择最普适，中间大小的机型，如iphone 8 plus，对比下大机型不会长太多，留有间隙即可。 若会员卡的底色为纯色或者规律底纹（非图案），也可以不一定等比例缩放，仅调整卡片高度即可（这样里面的文案icon需要根据卡片标注，不能跟随完整切图，稍微麻烦些，但效果更好）
综上，底部的模块采用下间距定位，主要模块采用等比自适应的方式，根据屏幕大小调整模块尺寸。
即能保证元素在一屏内，各个机型都显示得完好正常。
2019/9/23
Last updated
Was this helpful?