新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站制作 > 网站设计 > 响应式网页布局的类型及设计

响应式网页布局的类型及设计

时间:2018-02-06   文章来源:马海祥博客   访问次数:

因为越来越多的智能移动设备加入到互联网中来,移动互联网不再是独立的小网络了,而是成为了Internet的重要组成部分。响应式网络设计的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。

响应式网页布局的类型及设计-马海祥博客

真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局,而是要从整体上颠覆当前网页的设计方法,是针对任意设备的网页内容进行完美布局的一种显示机制,在此,跟大家分享一下响应式网页布局的类型及设计:

1、布局类型

在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局(具体可查看马海祥博客《响应式网页设计的排版设计趋势》的相关介绍),常见的主要有如下几种类型:

响应式网页布局的类型及设计-马海祥博客

2、布局实现

采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。

响应式网页布局的类型及设计-马海祥博客

固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸。

可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局。

弹性布局:以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果。

混合布局:同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。

可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式:其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式(具体可查看马海祥博客《响应式设计时代该如何进行网站设计》的相关介绍)。

响应式网页布局的类型及设计-马海祥博客

3、布局响应

对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计)、移动优先(从移动端向上设计)。

无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点)。

我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:

布局不变,即页面中整体模块布局不发生变化,主要有:

模块中内容:挤压-拉伸

响应式网页布局的类型及设计-马海祥博客

模块中内容:换行-平铺

响应式网页布局的类型及设计-马海祥博客

模块中内容:删减-增加

响应式网页布局的类型及设计-马海祥博客

布局改变,即页面中的整体模块布局发生变化,主要有:

模块位置变换

响应式网页布局的类型及设计-马海祥博客

模块展示方式改变:隐藏-展开

响应式网页布局的类型及设计-马海祥博客

模块数量改变:删减-增加

响应式网页布局的类型及设计-马海祥博客

很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

马海祥博客点评:

从响应式web设计的模拟示范网站可以看出,根据显示屏的大小变化、页面的排版布局都相应地自动作出了调整,整个页面里的所有元素都是灵活的,页面的排版不再受显示屏大小的限制。因此,响应式web设计的出现,其可用性被大大提高,无论是在哪个用户端,用户都可以按照自己的使用习惯浏览页面,减少使用时发生错误的几率,从而获得更好的用户体验。

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/2127.html,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: 网页设计 响应式网页 响应式

上一篇:简单易用的10个简化网页设计思路
下一篇:没有了

今日话题更多>

SEO研究院 更多 >>