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

#### 移动端单屏布局

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

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

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

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

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

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

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

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

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

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

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

1. 内容必须都要显示(这都是废话)
2. 横向需要占满(不占满空间利用率有点差)
3. 不能出现元素的重叠。

就直接拿示例来看,如下的一张图,在脑子中构思一下,你要如何布局?
![Alt text](/study/2018/20180329//1.png)

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

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

![Alt text](/study/2018/20180329/2.png)

从上图可以看出,图中有三个红框,最上面(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)

#### 总结

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

本文地址:http://www.zhangyunling.com/?p=827

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>