html5 移动端单页面布局,移动端单页布局-如何更好的自适应各尺寸屏幕
#### 移动端单屏布局
> 本篇不属于汇总类的文章,而是把自认为最优的解决方案来进行一些说明。
#### 为什么会有单屏布局
作为一个前端开发者,我是实在没有理解单屏布局的优势在哪里,尤其是要适配不同尺寸的手机,单屏布局,就有个很大的劣势。
毕竟,同一款设计稿,在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)
#### 总结
关于单页布局,如果页面元素过多,依然是很难兼容的,这里只是一个稍微好一些的解决方案,希望以后有时间,可以把这个继续补充一下,本篇文章个人感觉结束的有点仓促,没有写好,也许是不太善于该类型文章的结构吧。
html5 移动端单页面布局,移动端单页布局-如何更好的自适应各尺寸屏幕相关推荐
- 移动端H5页面,上下滑动翻页
移动端H5页面,上下滑动翻页 向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口 向下滑动进入前一页 , 当前页(加CSS样 ...
- H5中的history单页面,手动实现单页面开发,细说h5单页面原理
就目前来看,前端的单页面开发占了很大一部分,一方面无刷新的切换增强了体验,并且浏览器记录依然存在,前进后退都没问题,在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用 ...
- 实现网页自适应不同尺寸 屏幕(PC端)
前言:需求是一个静态展示页面根据UI提供设计稿完成,最好是适应具有不同屏幕尺寸,具体要求没提. 网上查找相关自适应布局,有很多种方案如下 media 媒体查询 类似于响应式布局根据不同屏幕显示不同效果 ...
- 什么是单页面应用(竞价单页面)
在早期的 Web 应用中,前端的作用很弱,业务逻辑和数据处理都在后端,后端给前端返回一个 HTML 页面,前端只负责展示.在这种模式下,单个 HTML 页面被当做一个功能原件,表单提交,超链接跳转都可 ...
- java 单页面spa_Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端>http://download.csdn.net/detail/epubitbook/8720475 # <MVC的 ...
- 前端单页面拆分多个单页面
问题现状 后端采用 ==多服务 + nginx== 的技术架构 根据业务拆分成不同的项目,具体服务通过location由nginx转发代理到不同的机器(端口)上. 前端采用的是 ==dva + roa ...
- uniapp 表单页面_uniapp自定义表单模板经验分享
极简属性:data (仅提供方法和极简示例,实践党可自行扩展,伸手党请绕行) 表单组件通用 注:此data是组件的一个隐藏属性 示例: template: {{sexs[grouplist.sexIn ...
- 网站单页面SEO关键词该如何布局更好?
关键词在页面中的分布,很大程度上影响了整个页面在搜索引擎中的表现.因为合理的关键词布局会更有利于蜘蛛的爬行和抓取,并且能够提高页面与关键词的相关性,那么对于网站的单页面,SEO关键词该如何布局才会更好 ...
- 单页面应用的前端路由原理是什么?
前置知识 在了解单页面应用的前端路由原理之前,我们先了解下什么事单页面应用,什么是多页面应用,他们之间的区别又是什么? 什么是单页面应用? 单页面应用指的是第一次进入页面的时候会请求一个html文件, ...
最新文章
- java 并发任务_java 并发 - 运行多个任务并执行第一个结果
- Linux静态IP设置
- java继承的知识点_Java知识点梳理——继承
- python hash
- 好好学python·函数
- redis list命令操作
- CMOS图像传感器——TDI CIS
- 【转】基于 Android NDK 的学习之旅-----数据传输(引用数据类型)
- JAVA之编译期和运行期区别
- wordpress蓝色简洁中文杂志主题wordpress模板
- 开发者最讨厌的编程语言:Perl 名列第一,PHP、Objective-C 和 Ruby 都在其中
- Linux 命令(61)—— ldd 命令
- 单元测试过程常见测试用例错误
- 为什么你的温湿度传感器测不准?
- 时序分析模型——MMMC
- microsoft office 文档左边导航窗格列表不见了
- 输入法 箭头符号大全
- nim语言编译后的c语言,Nim的编译方法
- SDK之aar封装总结
- 前端编程中利用PS切图还原设计图