html5 移动端单页面布局,移动端单页布局-如何更好的自适应各尺寸屏幕

#### 移动端单屏布局

> 本篇不属于汇总类的文章，而是把自认为最优的解决方案来进行一些说明。

#### 为什么会有单屏布局

作为一个前端开发者，我是实在没有理解单屏布局的优势在哪里，尤其是要适配不同尺寸的手机，单屏布局，就有个很大的劣势。

毕竟，同一款设计稿，在16*9与4*3的屏幕上，实在是不好适配，如果按照16*9的尺寸来设计，那么这种设计稿在4*3的屏幕上，基本属于全部都挤在一起的那种，完全是没法看的感觉，所以而且，我们也不能为了每一个比例，专门写一套CSS，用来适配。

所以一直特别不喜欢单屏布局的页面，除了上述的关于适配的问题之外，还有一个其他的问题就是：如果是流式布局，手机横屏之后，依然可以正常使用，但是当单屏的布局之后，横屏之后，肯定是无法使用的，那么就需要再去兼容横屏的问题，如何兼容横屏呢？是不是就得设计师们给一个横屏时的提示图，是不是前端开发者又得把横屏的处理一下？

处理横屏的时候，是不是又要处理横屏的兼容问题，以及其中再碰到的一些问题。

综上所述，实在是不喜欢单屏布局的设计，但是不喜欢归不喜欢，虽然我们平可以争取不使用单屏，但是毕竟很多时候，还是会选中单屏布局的。

这个时候，就只能选择去实现它，去兼容它了。

#### 单屏布局的优化实现方式

至于单屏布局会出现的问题，这里我们就多做说明啦，直接就看看，我所认为的，如何是做一个好的单屏布局，它可以让你之后，免于调试各种屏幕的适配。

在此先说一些单屏布局的限制:

1. 内容必须都要显示(这都是废话)

2. 横向需要占满(不占满空间利用率有点差)

3. 不能出现元素的重叠。

就直接拿示例来看，如下的一张图，在脑子中构思一下，你要如何布局？


这样的布局，如果我们只需要兼容当前流行的iphone手机，相信都很容易实现吧，这个没有什么问题，那么如果要兼容一下宽高比更大的手机呢？

说到这里，我们就不得不考虑，这个页面上，哪些空间是可以被压缩的，以保证当页面的高度降低时，优先压缩该压缩的空间，而不是把所有的元素都挤在了一起。


从上图可以看出，图中有三个红框，最上面(1号)和最下面(3号)的两个区域，是可以优先被压缩的，这两个区域，可以被拉伸也可以被压缩，因为留的多一点少一点，都不会对页面的展示有任何影响。

所以，我们接下来第一个要优化的就是这两个(1号与3号)区域。

接下来就是2号区域，2号区域，这里可以优先处理掉，也可以与内容中间的区域一起处理，这里我们就先优先处理吧，处理方式呢？

看图中的区域划分，就可以把单屏布局的内容，分为上中下三个部分，所以就内容而言，我们也可以把区域划分为：上中下三个块，那么实现的方式就如下：

“`

上区域

中间区域

下区域

“`

主区域，是一个定位到整个屏幕大小的容器，我们就不做说明。

首先，我们先来看看wrapper-middle区域，该区域居中，不管内容多少，它都是居中的处理(这里是针对本示例而言，在一些其他的情况下，可能只分为上下两个区域也说不定，只是为了传达一个布局思想)。

“`

.wrapper-middle{

position: absolute;

left: 0px;

width: 100%;

top: 50%;

transform: translateY(-50%);

}

“`

思想就是，把元素定位到页面中间，向上移动自身高度的50%，那么不管这块内容的高度多少，该区域都会在页面的中间位置。

再看看上区域和下区域，他们与中间位置，都是保持了一个固定的高度，我们就同样可以利用这个高度，所以我们可以设置如下的样式：

“`

.wrapper-top{

position: absolute;

left: 0px;

width: 100%;

bottom: 58%; // 注意这里，

z-index: 3;

}

.wrapper-bottom{

position: absolute;

left: 0px;

width: 100%;

top: 58%; // 注意这里，

z-index: 2;

}

“`

这里就主要看设置的bottom和top的值，根据这个百分比进行布局，上下间距就会根据屏幕的高度进行自适应，接下来就看看，单纯按照上面的结构，实现的效果：

地址：[单纯布局的DEMO](/study/2018/20180329/spa-test-1.html)

简单示例：[复杂布局的DEMO](/study/2018/20180329/spa-test-2.html)

#### 总结

关于单页布局，如果页面元素过多，依然是很难兼容的，这里只是一个稍微好一些的解决方案，希望以后有时间，可以把这个继续补充一下，本篇文章个人感觉结束的有点仓促，没有写好，也许是不太善于该类型文章的结构吧。