A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 船长 中级黑马   /  2014-11-24 18:49  /  9521 人查看  /  91 人回复  /   4 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 船长 于 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

点评

过来收藏一下!  发表于 2015-2-15 20:31
收藏了!  发表于 2015-2-15 20:29

评分

参与人数 1黑马币 +1 收起 理由
小小Y + 1 赞一个!

查看全部评分

91 个回复

倒序浏览
web字体加载时间太长会摔手机的。。。
回复 使用道具 举报
不太懂,还是赞一个
回复 使用道具 举报
怪物军师 来自手机 中级黑马 2014-12-1 22:26:59
板凳
不是太懂
回复 使用道具 举报
我就是来看看!
回复 使用道具 举报
响应式 web 设计。。。。收藏了。
回复 使用道具 举报
顶顶顶顶顶顶顶
回复 使用道具 举报
支持一个
回复 使用道具 举报
alston 中级黑马 2014-12-11 11:40:55
9#
谢谢楼主
回复 使用道具 举报
不太懂!支持一个。
回复 使用道具 举报
看不懂,看起起来挺好,挺高深的
回复 使用道具 举报
屏幕保护?是吧
回复 使用道具 举报
支持一下下!
回复 使用道具 举报
徐磊磊 来自手机 初级黑马 2014-12-14 17:03:06
14#
高大上哦
回复 使用道具 举报
不淡定,小学生 来自手机 中级黑马 2014-12-14 20:24:07
15#
好腻害~~
回复 使用道具 举报
船长 中级黑马 2014-12-14 21:52:36
16#

你的头像也好腻害。。
回复 使用道具 举报
船长 发表于 2014-12-14 21:52
你的头像也好腻害。。

你的也很腻害。这是LOL的普朗克么
回复 使用道具 举报
Galen 初级黑马 2014-12-19 20:51:31
18#
不错,很形象啊
回复 使用道具 举报
些许 中级黑马 2014-12-19 22:22:00
19#
新手不懂   还是赞一个
回复 使用道具 举报
响应式是以后web前端发展的趋势。
回复 使用道具 举报
12345下一页
您需要登录后才可以回帖 登录 | 加入黑马