H5整屏设计方案探讨

我们再制作H5展示页面的时候，有时需要展示的内容是全屏的，就像播放幻灯片一样。

全屏的设计有几个特点：
1 内容在一屏内显示完全
2 屏幕内不能出现滚动条
3 兼容不同长宽比的屏幕

我们来讨论一下第三个特点。很久以前我们对于整屏的兼容性是回避的，都统一按照iphone6的尺寸来设计页面和制作页面。这样的好处是设计和制作都相对简单，在比iphone6短的手机里页面会出现不是整屏的情况，会允许用户滑动页面查看被遮挡的内容。这一方案本身缺陷很多，直到iphoneX的出现，这个缺陷变的无法容忍。

秉承设计简单、制作简单的原则，我们提出了下面这个兼容不同长宽比屏幕的整屏设计方案。

兼容方案

设计稿只需要按照短屏幕Android机进行设计，比如主流的分辨率：360x640

设计稿了设计一个或者多个星星区域，这个星星区域根据屏幕的长度进行拉伸，当然拉伸的是星星区域的背景，而不是内容。这样其他内容固定尺寸不变，只拉伸星星区域的背景就能使得一张设计稿兼容3个主流屏幕。

关于星星区域的高度缩放可以使用简单的css计算属性来做。比如：

.start {
  height: calc(100vh - x)
}

x是图中，（顶部元素+中部元素+底部元素）的高度

现在就剩下星星区域应该如何设计的问题了，这个问题成功的转给了设计，完～