马海祥博客 > 网站制作 > 网站设计 > 响应式网页设计的基本原则布局

响应式网页设计的基本原则布局

时间：2014-12-11 文章来源：马海祥博客访问次数：

目前来看，响应式网页设计对于解决多类型屏幕问题来说是个不错方案，但从实际制作的角度来看，其却存在着很多的困难，没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。

响应式网页设计的基本原则布局-马海祥博客

随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史，因此，现在就让我们来说明一下如何运用响应式网页设计的各项基本原则来实现，而不是抗拒流畅的网页体验，为了简单起见，我们将着重讲布局。

1、响应式设计VS自适应网页设计

响应式网页设计的基本原则布局-马海祥博客

对于响应式设计和自适应网页设计看似相同实则不然，这两种设计方式彼此相辅相成，所以，说也没有对错之分，具体情况要依内容而定（不明白的博友，可查看一下马海祥博客《什么是响应式网页设计》的相关介绍）。

2、最大值和最小值

响应式网页设计的基本原则布局-马海祥博客

有时候内容占满整个屏幕宽度（例如在移动设备上）是好事，但如果相同的内容在电视屏幕上也撑得满满的，貌似就不太合理了，这就是为什么要有最大值或最小值，例如：如果宽度为100%，最大宽度1000px，那么内容就会以不超过1000px的宽度填充屏幕。

3、Web字体VS系统字体

响应式网页设计的基本原则布局-马海祥博客

想让自己的网站拥有炫酷的Futura或Didot效果吗？那就是用web字体吧，尽管web字体看起来很炫酷，但马海祥提醒你要记住，这些字体都需要用户下载，字越多，用户加载页面的时间也就越长。

另一方面，系统字体加载速度则快得多（前提是用户本机就有），但太过普通。

4、内容流

随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。

响应式网页设计的基本原则布局-马海祥博客

如果你习惯了使用像素和点进行设计，可能会觉得这个有点难掌握，不过没关系，习惯了就很好理解了。

5、位图VS矢量图

响应式网页设计的基本原则布局-马海祥博客

你的图标是否有很多细节，并且应用了很多华丽的效果？如果是，那就用位图；如果不是，考虑使用矢量图。

如果是位图，使用jpg、png或gif；矢量图则最好使用SVG或图标字体，其各有利弊，但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。

另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图，还有，如果图标有很多曲线，那有可能会比位图还大，所以马海祥建议你要明智取舍。

6、断点

响应式网页设计的基本原则布局-马海祥博客

断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显示3栏，在移动设备上仅显示1栏，大多数CSS属性都可以实现断点之间的变形。

断点放置的位置通常取决于内容，比如，如果一句话要换行，你可能就需要加上断点，但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系，很容易弄的一团乱。

7、嵌套对象

响应式网页设计的基本原则布局-马海祥博客

还记得相对位置吗？如果一大堆要素彼此都紧密联系，那么必将难以控制。

因此，将要素放置到容器中就会让它们变得更加好理解，并且简洁明快，这种情况就需要用到像素之类的静态单位了，静态单位对于logo和按钮等不需要扩展的内容来说非常有用。

8、相对单位

响应式网页设计的基本原则布局-马海祥博客

你的设计对象可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型，像素密度也会彼此不同，所以我们需要使用灵活可变，并且能够适应各种情况的单位。

那么，在这种情况下，百分比等相对单位就派上用场了，使用百分比时，我们说宽度50%就是表示宽度占屏幕大小（或者叫视区，也就是指所打开浏览器窗口的大小）的一半（具体可查看马海祥博客《响应式网页布局的实现方法原理》的相关介绍）。

9、移动优先还是台式桌面优先

响应式网页设计的基本原则布局-马海祥博客

严格来说，项目从小屏幕入手过渡到大屏幕（移动优先），还是从大屏幕入手过渡到小屏幕（台式桌面优先）区别不大。

但是，从移动端着手可以给你带来一些额外的限制，帮助你进行决策，通常情况下大家会从两方面同时着手，所以，你还是要看哪种方式最适合你。

马海祥博客点评：

如今，Web设计和开发领域发展很快，有时我们会无法跟上设备与分辨率革新的步伐，对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的，结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。

不过，我们可以通过另外一种方式——响应式网页设计，可以帮助我们避免这种情况的发生。

本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/967.html，注明出处；否则，禁止转载；谢谢配合！

相关标签搜索： 响应式网页网页布局响应式设计网页设计原则

上一篇：全能型设计师必备的10个技能
下一篇：常见的七种响应式导航设计模式的优点和缺点

您可能还会对以下这些文章感兴趣！

响应式网页布局的实现方法原理

昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计？》，我觉的响应式网页设计不仅仅是一种趋势，还更是一个新的设计解决方案！它有助于解决不同的分辨率和设备（台式电脑，笔记本电脑，平板，手机）相关的设计问题。既然是设计的问题，这里就会涉及到很多……【查看全文】

阅读：52335关键词：响应式网页响应式布局响应式原理响应式设计 日期：2013-09-17
什么是响应式网页设计？

响应式网页设计(Responsive Web design，通常缩写为RWD)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他……【查看全文】

阅读：5336关键词：网页设计响应式设计响应式网页设响应式网页 日期：2013-09-15
响应式网页设计的排版设计趋势

假如你研究一个流行的作品集网站，里面展示了当今的网页设计，毫无疑问，你会注意到网页的基本结构千变万化，根本没有固定形态，它可以伸缩变化成任何所需的东西，我认为这是响应式网页设计带来的最棒的副产品，事实上，新的准则，就是根本没有固定准则，我们能观察发现……【查看全文】

阅读：1117关键词：响应式网页响应式设计排版设计设计趋势网页设计 日期：2015-04-01
全方位解析响应式网页的设计与应用

响应式网页设计可以提供一个比较满意的效果，他给广泛的应用设备提供了一个自定义的解决方案，无论是一个老式旧笔记本还是最先进的设备都能够获得比较好的体验。但响应式网页设计也并不是最好的，这只是个单纯的概念，它可以有效的提高用户体验但是却不能彻底解决。我们……【查看全文】

阅读：1301关键词：响应式网页网页设计响应式应用应用设计 日期：2014-05-08
基于页面易读性的文字编排设计要点

文字的编排还应注意文字本身的格式效果。图文画面构成中，把不同重点的文字内容用不同的字体来表现，是设计中常用手法，如：行首的强调、引文的强调等。但字体过多画面就显得不安宁，字体过少又缺乏必要的生气，字体数量的多寡常暗示平面中核心内容的多少，所以我们要详……【查看全文】

阅读：760关键词：易读性文字编排文字编排设计设计要点 日期：2014-04-15
网页设计新手需知道的10条实用法则

大胆留白是设计概念中常常会提到的理论，但真正能根据理论具体落实的设计师却为数不多，可能是因为设计师胆儿不够大，另一种可能是没有在实际中领会到留白的美妙，网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间，并不是一种所谓的“偷懒”行为，……【查看全文】

阅读：733关键词：网页设计设计法则 日期：2015-01-15
关于响应式页面重构的一些关键技术点

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间……【查看全文】

阅读：698关键词：响应式响应式页面 日期：2016-09-25
分享20个极简主义的网页设计风格

极简主义的设计之所以总是流行，是因为他们一直用一些很简单的创意和资源去表达概念，网页设计的领域受极简主义设计的影响很大，许多有才华的设计师总是用几个简单的工具就设计出了不起的网站，比如字体和几何图形等元素。简约设计的优势不仅仅是其优雅的风格，也有在网页加……【查看全文】

阅读：718关键词：极简主义网页设计设计风格 日期：2018-11-01
全能型设计师必备的10个技能

为了成为一个全能的设计师，你必须学会掌握一些技能来有效的应对客户或你的老板，很多情况下，一个设计师需要有良好的审美观和许多年的经验，而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能，掌握这些技能，你不仅能在团队中成为更有价值的……【查看全文】

阅读：1071关键词：设计师设计技能 日期：2014-11-07
网站设计的重要因素及注意事项

网站设计(Web Design)就是一个把信息需求转换成用软件网站表示的过程，就是指在因特网上，根据一定的规则，使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。网站设计的目的就是产生网站。简单的信息如文字，图片（GIFs， JPEGs，PNGs）和表格……【查看全文】

阅读：1306关键词：网站设计网站设计因素网站设计注意 日期：2012-10-05

↓ 点击查看更多 ↓

分类目录

SEO新闻
SEO思维
移动端SEO
SEO问答
医疗SEO
淘宝SEO
企业SEO
站外SEO
网站设计
交互设计
网站策划
网页制作
营销策划
营销案例
竞价技巧
数据分析
写作技巧
微信微博
自媒体
新媒体
内容营销
网站运营
O2O模式
App运营
产品运营
网赚教程
创新思维
电子商务
名人访谈
创业故事

热点推荐

响应式设计时代该如何进行网站设计
网站设计的重要因素及注意事项
响应式网页设计的基本原则布局
简约页面设计风格的相关技巧有哪些？

运营思维更多>>

依靠电子商务改变茶叶营销模式会遇到什么难题？: 立即访问

如何利用O2O模式经营一家理发连锁店: 立即访问

免费模式赚钱的核心竞争是什么: 立即访问

新接手一款App该怎么做App优化推广？: 立即访问

数据分析的流程及分析方法: 立即访问

网赚新手快速寻找暴利项目产品的4大途径: 立即访问

视频网站为什么很难赚钱？: 立即访问

产品经理怎样用数据指标分析的思路优化产品？: 立即访问

竞品分析报告的3大步骤: 立即访问

今日头条能否成为自媒体赚钱的新平台: 立即访问

互联网更多>>

基于高斯模糊原理的模糊图片的研究高斯模糊（Gaussian Blur）的原理中，它是根据高斯曲线调节象素色值，它是有选择地模糊图像。说得直白一点，就是高……
互联网思维的一些特征如今，互联网迅猛发展已经渗透人们生活各个方面，尤其是互联网正加快向传统行业渗透和融合，对传统行业提出严……
盘点2010年代这10年的重大网络安全事件二十一世纪的第2个十年即将过去，在过去十年里有很多的重大网络安全事件发生，我们见证了过去十年，大量的数据……

网络营销更多>>

浅谈社交网络营销的七大营销策略	从免费到付费的社交媒体形态发展分析
新浪微博已正式发布公告全面封杀微信	2017年数字营销的十大发展趋势及发展状态