响应式网页布局的类型及设计
因为越来越多的智能移动设备加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了Internet的重要组成部分。响应式网络设计的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。
真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制，在此，跟大家分享一下响应式网页布局的类型及设计：
1、布局类型
在谈响应式布局前，我们先梳理下网页设计中整体页面排版布局（具体可查看马海祥博客《响应式网页设计的排版设计趋势》的相关介绍），常见的主要有如下几种类型：
2、布局实现
采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。
固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸。
可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局。
弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。
混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。
可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式：其中可切换的固定布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果具响应性，都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计，需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式（具体可查看马海祥博客《响应式设计时代该如何进行网站设计》的相关介绍）。
3、布局响应
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先(从桌面端开始向下设计)、移动优先(从移动端向上设计)。
无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点)。
我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：
布局不变，即页面中整体模块布局不发生变化，主要有：
模块中内容：挤压-拉伸
模块中内容：换行-平铺
模块中内容：删减-增加
布局改变，即页面中的整体模块布局发生变化，主要有：
模块位置变换
模块展示方式改变：隐藏-展开
模块数量改变：删减-增加
很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。
马海祥博客点评：
从响应式web设计的模拟示范网站可以看出，根据显示屏的大小变化、页面的排版布局都相应地自动作出了调整，整个页面里的所有元素都是灵活的，页面的排版不再受显示屏大小的限制。因此，响应式web设计的出现，其可用性被大大提高，无论是在哪个用户端，用户都可以按照自己的使用习惯浏览页面，减少使用时发生错误的几率，从而获得更好的用户体验。
本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/2127.html，注明出处；否则，禁止转载；谢谢配合！上一篇：简单易用的10个简化网页设计思路
下一篇：极简主义网页设计的特征和最佳实践
您可能还会对以下这些文章感兴趣！
-
网页设计新手需知道的10条实用法则
大胆留白是设计概念中常常会提到的理论，但真正能根据理论具体落实的设计师却为数不多，可能是因为设计师胆儿不够大，另一种可能是没有在实际中领会到留白的美妙，网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间，并不是一种所谓的“偷懒”行为，……【查看全文】
-
网站设计的重要因素及注意事项
网站设计(Web Design)就是一个把信息需求转换成用软件网站表示的过程，就是指在因特网上，根据一定的规则，使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。网站设计的目的就是产生网站。简单的信息如文字，图片（GIFs， JPEGs，PNGs）和表格……【查看全文】
-
什么是响应式网页设计？
响应式网页设计(Responsive Web design，通常缩写为RWD)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他……【查看全文】
-
基于页面易读性的文字编排设计要点
文字的编排还应注意文字本身的格式效果。图文画面构成中，把不同重点的文字内容用不同的字体来表现，是设计中常用手法，如：行首的强调、引文的强调等。但字体过多画面就显得不安宁，字体过少又缺乏必要的生气，字体数量的多寡常暗示平面中核心内容的多少，所以我们要详……【查看全文】
-
响应式网页设计的排版设计趋势
假如你研究一个流行的作品集网站，里面展示了当今的网页设计，毫无疑问，你会注意到网页的基本结构千变万化，根本没有固定形态，它可以伸缩变化成任何所需的东西，我认为这是响应式网页设计带来的最棒的副产品，事实上，新的准则，就是根本没有固定准则，我们能观察发现……【查看全文】
-
分享20个极简主义的网页设计风格
极简主义的设计之所以总是流行，是因为他们一直用一些很简单的创意和资源去表达概念，网页设计的领域受极简主义设计的影响很大，许多有才华的设计师总是用几个简单的工具就设计出了不起的网站，比如字体和几何图形等元素。简约设计的优势不仅仅是其优雅的风格，也有在网页加……【查看全文】
-
响应式网页布局的实现方法原理
昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计？》，我觉的响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备（台式电脑，笔记本电脑，平板，手机）相关的设计问题。既然是设计的问题，这里就会涉及到很多……【查看全文】
-
全方位解析响应式网页的设计与应用
响应式网页设计可以提供一个比较满意的效果，他给广泛的应用设备提供了一个自定义的解决方案，无论是一个老式旧笔记本还是最先进的设备都能够获得比较好的体验。但响应式网页设计也并不是最好的，这只是个单纯的概念，它可以有效的提高用户体验但是却不能彻底解决。我们……【查看全文】
-
全能型设计师必备的10个技能
为了成为一个全能的设计师，你必须学会掌握一些技能来有效的应对客户或你的老板，很多情况下，一个设计师需要有良好的审美观和许多年的经验，而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能，掌握这些技能，你不仅能在团队中成为更有价值的……【查看全文】
-
关于响应式页面重构的一些关键技术点
单纯的页面重构，所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间……【查看全文】
分类目录
新接手一款App该怎么做App优化推广？
产品经理怎样用数据指标分析的思路优化产品？
依靠电子商务改变茶叶营销模式会遇到什么难题？
视频网站为什么很难赚钱？
数据分析的流程及分析方法
免费模式赚钱的核心竞争是什么
网赚新手快速寻找暴利项目产品的4大途径
竞品分析报告的3大步骤
今日头条能否成为自媒体赚钱的新平台
如何利用O2O模式经营一家理发连锁店互联网更多>>
互联网思维的一些特征
如今，互联网迅猛发展已经渗透人们生活各个方面，尤其是互联网正加快向传统行业渗透和融合，对传统行业提出严……
基于高斯模糊原理的模糊图片的研究
高斯模糊（Gaussian Blur）的原理中，它是根据高斯曲线调节象素色值，它是有选择地模糊图像。说得直白一点，就是高……
盘点2010年代这10年的重大网络安全事件
二十一世纪的第2个十年即将过去，在过去十年里有很多的重大网络安全事件发生，我们见证了过去十年，大量的数据……
动效设计的物理法则及应用 
基于交互体验的扁平化设计要点 
响应式网页设计的现状与难点 SEO优化 更多>>
|
|
-
网站收录量对于网站排名的影响作用
很多做SEO的朋友都会问，是不是网站收录越多网…… -
SEO是什么？
对于刚入SEO行业的新人来说，要想做好网站的s…… -
史上最全的网站SEO策略方案
在搜索引擎优化中，一个网站的SEO策略能最终影…… -
移动端手机站做站内优化的要点
随着移动流量的与日俱增，移动搜索引擎的功能…… -
今年网站SEO优化要注意的6大策略
通俗的来说，SEO技术就是一种达到SEO效果所采用…… -
如何使用留言评论进行推广引流
随着新媒体的快速发展，留言评论变得随处可见…… -
百度搜索将推出飓风算法2.0：严厉打
为了营造良好的搜索内容生态，保护搜索用户的…… -
百度冰桶算法5.0：保障移动搜索用户
为了提升移动搜索落地页体验，营造优质的移动……