黑马程序员技术交流社区

标题: 响应式Web设计的9项基本原则 [打印本页]

作者: 船长 时间: 2014-11-24 18:49
标题: 响应式Web设计的9项基本原则
本帖最后由船长于 2014-11-24 18:45 编辑

　　响应式 web 设计对于解决多类型屏幕问题来说是个不错方案，但从印刷的角度来看，其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸，没有任何物理限制，让人感到无从下手。随着建立网站可用的各种小工具越来越多，像素设计局限于桌面和移动端也已经成为历史。因此，现在就让我们来说明一下如何运用响应式 web 设计的各项基本原则来实现，而不是抗拒流畅的网页体验。为了简单起见，我们将着重讲布局（当然，响应式设计远远不止于此，如果你想进一步学习，可以点击此处）。
　　响应式设计 vs 适应式设计
　　看似相同实则不然。这两种设计方式彼此相辅相成，所以说也没有对错之分。具体情况要依内容而定。

内容流
　　随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。如果你习惯了使用像素和点进行设计，可能会觉得这个有点难掌握。不过没关系，习惯了就很好理解了。

相对单位
　　你的设计对象可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同，所以我们需要使用灵活可变，并且能够适应各种情况的单位。那么在这种情况下，百分比等相对单位就派上用场了。使用百分比时，我们说宽度 50% 就是表示宽度占屏幕大小（或者叫视区，也就是指所打开浏览器窗口的大小）的一半。

断点
　　断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显示 3 栏，在移动设备上仅显示 1 栏。大多数 CSS 属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。比如，如果一句话要换行，你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系，很容易弄的一团乱。

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

嵌套对象
　　还记得相对位置吗？如果一大堆要素彼此都紧密联系，那么必将难以控制。因此，将要素放置到容器中就会让它们变得更加好理解，并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于 logo 和按钮等不需要扩展的内容来说非常有用。

移动优先还是台式桌面优先
　　严格来说，项目从小屏幕入手过渡到大屏幕（移动优先），还是从大屏幕入手过渡到小屏幕（台式桌面优先）区别不大。但是，从移动端着手可以给你带来一些额外的限制，帮助你进行决策。通常情况下大家会从两方面同时着手，所以你还是要看哪种方式最适合你。

web 字体 vs 系统字体
　　想让自己的网站拥有炫酷的 Futura 或 Didot 效果吗？那就是用 web 字体吧。尽管 web 字体看起来很炫酷，但你要记住，这些字体都需要用户下载，字越多，用户加载页面的时间也就越长。另一方面，系统字体加载速度则快得多（前提是用户本机就有），但太过普通。

位图 vs 矢量图
　　你的图标是否有很多细节，并且应用了很多华丽的效果？如果是，那就用位图。如果不是，考虑使用矢量图。如果是位图，使用 jpg、png 或 gif。矢量图则最好使用 SVG 或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有很多曲线，那有可能会比位图还大，所以要明智取舍。

原文地址：blog.froont.com

作者: Yishan 时间: 2014-11-25 12:05
web字体加载时间太长会摔手机的。。。

作者: 逗比程序员 时间: 2014-11-26 23:31
不太懂，还是赞一个

作者: 怪物军师 时间: 2014-12-1 22:26
不是太懂

作者: l763631191 时间: 2014-12-3 13:22
我就是来看看！

作者: quick3g 时间: 2014-12-6 04:46
响应式 web 设计。。。。收藏了。

作者: likechencen 时间: 2014-12-8 20:46
顶顶顶顶顶顶顶

作者: likechencen 时间: 2014-12-9 13:51
支持一个

作者: alston 时间: 2014-12-11 11:40
谢谢楼主

作者: it667135 时间: 2014-12-11 12:30
不太懂！支持一个。

作者: chaijie 时间: 2014-12-11 18:59
看不懂，看起起来挺好，挺高深的

作者: 嗷嗷嗷 时间: 2014-12-11 20:25
屏幕保护？是吧

作者: sjzxst2 时间: 2014-12-12 17:08
支持一下下！

作者: 徐磊磊 时间: 2014-12-14 17:03
高大上哦

作者: 不淡定，小学生 时间: 2014-12-14 20:24
好腻害～～

作者: 船长 时间: 2014-12-14 21:52

不淡定，小学生发表于 2014-12-14 20:24
好腻害～～

你的头像也好腻害。。

作者: 不淡定，小学生 时间: 2014-12-14 22:17

船长发表于 2014-12-14 21:52
你的头像也好腻害。。

你的也很腻害。这是LOL的普朗克么

作者: Galen 时间: 2014-12-19 20:51
不错，很形象啊

作者: 些许 时间: 2014-12-19 22:22
新手不懂还是赞一个

作者: Jason996 时间: 2014-12-19 23:13
响应式是以后web前端发展的趋势。

作者: wzhk029 时间: 2014-12-20 23:17
东西好好多哦

作者: wzhk029 时间: 2014-12-20 23:19
东西好好多哦

作者: 圣诞老人 时间: 2014-12-20 23:44
好东西。船长果然没有闲着

作者: 夜枫冷 时间: 2014-12-21 00:12
好像很深奥的样子

作者: Mike_zh 时间: 2014-12-21 22:02
长知识了，厉害，学习了

作者: 小徐_y8nUx 时间: 2014-12-23 13:23
学习了，厉害

作者: hi小鬼 时间: 2014-12-26 10:04
哎呦，不错哦

作者: wzhk029 时间: 2014-12-28 16:45
必须的赞。。。

作者: 海是倒过来的天 时间: 2014-12-28 17:01
必须赞！

作者: 陈思伟 时间: 2014-12-30 22:17
赞一个。。。顶了

作者: dream_style 时间: 2014-12-30 23:45
收藏了，赞一个

作者: 飞翔的蜗牛 时间: 2015-1-1 00:38
支持一下！

作者: 蛋卷 时间: 2015-1-1 13:04
看看。。。。。。。。

作者: 396944929 时间: 2015-1-1 16:11
这个以后会讲到吧

作者: dimost 时间: 2015-1-2 16:22
厉害厉害

作者: 牛牛宝 时间: 2015-1-3 00:03

hello world

复制代码

作者: 六悦唯夏 时间: 2015-1-3 19:44
看看涨姿势

作者: 请叫我丶菜鸟 时间: 2015-1-3 21:42
还没有到安卓班，这些有点难理解

作者: 请叫我丶菜鸟 时间: 2015-1-3 21:43
还没有到安卓班，这些有点难理解，还有，那个链接打开全是英文

作者: jyl3203217 时间: 2015-1-4 10:52
没看到回答的？

作者: 六悦唯夏 时间: 2015-1-4 22:16
9项基本原则。。。

作者: eli0827 时间: 2015-1-6 21:50
还在学基础，web还很遥远

作者: da_chuan 时间: 2015-1-7 21:40
响应式布局相当火啊

作者: youga 时间: 2015-1-8 16:53
为了分数赞一个

作者: mengxingdong 时间: 2015-1-11 18:33
学习学习。

作者: MengDeKaiShi 时间: 2015-1-11 23:23
咱

作者: 飞翔的蜗牛 时间: 2015-1-11 23:50
学习。。。。

作者: 飞翔的蜗牛 时间: 2015-1-11 23:51
不错。。。。。。

作者: 羅蜜1994 时间: 2015-1-12 17:00
            羅蜜頂級外送茶

               LINE:misi999
            skype： MISI12300
            即時通：misi1230091

❤活潑可愛學生妹❤性感火辣女秘書❤狐媚老師❤悶騷人妻
❤視訊辣妹❤優質辣妹OL ❤檳榔西施❤氣質各航航空空姐
❤內衣麻豆❤夜店辣妹❤電玩美女❤無名正妹❤平面麻豆SG

◆每天不斷更新.天天有驚喜.絕對是您外送茶莊最佳選擇

◆外送茶地區：台北高雄台中彰化南投新竹桃園

◆外送地點自己選:各大飯店HT 各大旅館MT（熟客住家）

◆服務內容：愛愛口交按摩  洗澡哈拉（特殊服務提前說）

★全台灣各行各業兼職妹【每日不定時間出來】

★安全性：隱密快速、保密、免受騙、免上當
見到MM本人滿意后現金消費.不喜歡可換.不轉帳.不匯款.不買點數

你還在看著A片打手槍ㄇ想讓弟弟住進溫暖的粉紅小ㄇ

你還在寂夜中煎熬ㄇ脫掉你的褲子~丟掉你的煩惱吧

欲火焚身ㄇ寂寞難耐ㄇ弟弟變硬了ㄇ啊啊啊~妹妹想要嘛~快來猛插壓

選擇羅蜜外送茶坊給您最優質頂級的茶色  你的快樂就是我的保障~

非誠勿擾☆☆☆☆☆

作者: 枪杆不如笔杆 时间: 2015-1-14 18:56
做web和手机端体验好重要啊

作者: User 时间: 2015-1-15 20:59
支持一下

作者: 梦开始的地方 时间: 2015-1-16 13:53
非常棒的体验，在那个我是歌手的网页上，有360度旋转效果，设计的不错。

作者: 张宁111 时间: 2015-1-17 23:05
手一抖3分到手

作者: 一朵奇葩 时间: 2015-1-18 21:35

我就是来顶贴的

作者: 张宁111 时间: 2015-1-20 21:34
小手一抖，积分到手。

作者: 六悦唯夏 时间: 2015-1-21 09:33
看一看~

作者: xyycici 时间: 2015-1-21 21:48
顶一个。

作者: lc030405 时间: 2015-1-22 22:23
真是不过，你们知道的挺早

作者: 张宁111 时间: 2015-1-23 22:41
小手一抖积分到手

作者: xyycici 时间: 2015-1-24 22:09
来学习的。

作者: 张宁111 时间: 2015-1-25 22:11
小手一抖。积分到手

作者: maikuraki 时间: 2015-1-27 00:33
看不太懂。。。

作者: Aily 时间: 2015-1-27 01:41
水平太低看不太懂但是感觉说的挺好的顶一下

作者: 魏建姝 时间: 2015-1-29 13:39
我不懂啊

作者: yunxiao 时间: 2015-1-30 13:54
貌似很厉害

作者: 张宁111 时间: 2015-1-31 23:15
web字体加载时间太长会摔手机的。。。

作者: 我jiu是wo 时间: 2015-2-2 22:58
qqqqqqqqqqqqqqqq

作者: 张宁111 时间: 2015-2-3 00:29
响应式是以后web前端发展的趋势。

作者: 亚特兰蒂斯 时间: 2015-2-4 19:58
秒死现在不会啊

作者: 行我福 时间: 2015-2-7 17:49
不错的东西，赞一个

作者: huangshengsen 时间: 2015-2-10 10:13
唉，刷刷h币

作者: huangchunwei 时间: 2015-2-11 09:37
赞赞赞。。。虽然没看懂吧。感觉很厉害

作者: huangshengsen 时间: 2015-2-12 11:07
刷刷h币

作者: huangshengsen 时间: 2015-2-16 13:03
刷刷h币

作者: 刘力玮 时间: 2015-2-26 12:25
很生动，说的也比较干练，有点难懂

作者: xingzjx 时间: 2015-3-8 09:29
不错。。。

作者: 别低头皇冠会掉 时间: 2015-3-10 13:44
我就是个菜鸟谦虚受教来的

作者: yuang4074 时间: 2015-3-13 21:34
大学时帮老师做订餐下单的手机APP 初学初用现在看完本文感觉理解的很深刻不错

作者: 958316737 时间: 2015-3-15 20:41
不是很懂，，，去了解了解

作者: zhaotiao3080 时间: 2015-3-16 08:45
学习了哈哈哈

作者: sixleaves 时间: 2015-3-19 18:50
路过、mark。

作者: _etc 时间: 2015-3-19 20:46
好炫的效果，响应式能适应各种屏幕，是个好东西。

作者: 小亮smile 时间: 2015-3-19 21:51
叮叮叮！！赞赞赞！！！！

作者: 卢乾荣 时间: 2015-3-19 21:52
支持，表赞一个

作者: 958316737 时间: 2015-3-20 22:52
赞一个，，收藏

作者: zhouchaoone 时间: 2015-3-22 00:17
顶

作者: 朱令娟 时间: 2015-3-23 00:31
很不错的帖子，有点了解了

作者: 朱闹闹 时间: 2015-3-23 23:26
这些比较，挺好理解

作者: 王强~ 时间: 2015-3-24 12:59
收藏谢谢分享~~

作者: 378939632 时间: 2015-3-24 21:26
响应式是以后web前端发展的趋势。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2