单屏布局最佳实践

#### 前言

在之前的4月初,也写过一篇单屏布局的文章,当时觉得并没有写好,最近也在思考,其实我本人来说,更不适合写一些布局类的文章,不是说因为语言的描述的问题,而是布局的文章最好有图来进行说明,单纯的语言描述很难让人理解,而我虽然是做前端的,但是对于画图,简直就是没有感觉。

那为什么又写这篇文章呢,是因为,我觉得在单屏布局方面,我现在的这套理论也是完全足够的了,如果还希望有更优的体验的话,就只能是加大工作量,多写几套适配方案的那种了。

这篇实践的优点就在于,我其实基本上,只是写了一套样式,可以适配在不同宽高比的设备上(至少不是出现错乱的情况),作为一个产品的话,虽然不是完美的(完美状态,就按照客户端开发模式,不同宽高比的设备,有不同的展示内容),但是在我看来是足够了。

而且,这还是跟公司的设计师讨论的结果,甚至说,这个想法的由来,还是她的建议中,得到的灵感,一个好的重构,还是要和设计师好好处好关系的。

#### 单屏布局

我的最佳实践中,单屏布局的模式是等比布局,在布局的过程中,先按照模块,在上下方向进行等比布局,就是说:定位的部分,不使用固定值,直接使用百分比。

这个就可以直接查看示例了,在示例中,页面中的包含了5个元素,上下各两个,居中的一个。

可以直接查看示例:[正常布局的示例](/study/2018/201805261/screen-index.html)

以及iframe的示例:

这里的核心观点是:内容区域,根据所处的位置(上下),进行模块划分,以页面的中心线为基准点,在基准点以上的区域,使用`bottom`进行定位,在基准线下方的模块,使用`top`进行定位,而每一个模块的高度,在宽度不变的情况下,是不会变化的。

所以可以直接打开前面的页面,把页面的宽度调节到小于高度的情况,继续进行浏览器的高度的变化,这个时候,模块之前的位置,会把一些空余的位置进行压缩,而模板本身的内容,却没有变化。

当然这里有一个问题就是:空间压缩了,内容会变得相对更挤,或者空间拉伸了,位置就相对于更空~,如果内容量不变的情况下,其实这个问题,不管怎么处理,就是会存在的,所以我个人认为,这个是正常的一种状态。

但是,从上面的示例中,同时也看到了一个问题,当宽高比小于一定的值的时候,不管怎么压缩,都会出现模块重合的情况,这个在示例中,需要压缩到`width/height = 1/1`的情况,才会出现,但是在实际的开发状态中,一般压缩到`width/height = 3/4`的情况下,内容就会出现挤压的情况了。

并且,我们无法确定,用户是使用什么样的设备在访问您的页面,为了体验,也只能再做兼容。

#### 更优的单屏

宽高比大的设备虽然不多,但是你总不能不做兼容不是,那这个时候,就用到了前一篇文章中说到的`aspect-ratio`属性了。

还是直接上示例了,毕竟作为一个程序员,直接查看示例,还是能查看到更多的,毕竟代码比语言更有表现力。

查看示例:[代码示例](/study/2018/201805261/screen-aspect-ratio.html)

并且其核心代码如下:
“`
body{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
}

@media screen and (min-aspect-ratio:1/1){
body{
position: relative;
padding-top: 160%;
}
}
“`

当设备的宽高比大于1时,其实在本示例中,就是宽度大于高度时,则直接把body的样式重写掉,使用padding-top对页面的高度进行按宽度设置,这样的话,body直接变成内部滚动的。

这样虽然页面不再是单屏的页面,但是依然可以很好的展示,并且你需要写的代码也仅仅是上面的6行代码,而这6行代码,都不需要经过大脑,直接copy就可以了。

关于aspect-ratio的相关内容,可以查看前一篇文章。

#### 总结

这样的方案有一个好处,适配所有的设备,也只是写了同一套代码,当设备的限制而无法使用单屏模式时,直接向后退化,不再使用单屏的模式,但是却不需要改动其他的任何代码。

减少工作量,维护也方便,只需维护一套代码即可。

这是最近做单屏的项目,所总结的一些我个人认为的最佳实践,希望对您有所帮助。

如果您有更优的解决方案,也请指教,谢谢查阅。

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

发表评论

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

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