你能分得清”响应式(Responsive)”和”自适应(Adaptive)”网页设计吗?

2015-01-30阅读(6650)评论(0)牵着狗狗看MM

苏州实时公交查询

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

响应式设计 vs 适应式设计

两者看起来很像,其实是不一样的。两者相辅相成,没有对错之分,都是由内容来决定的。
01_Responsive-vs-Adaptive

内容流

随着屏幕尺寸越来越小,内容所占的垂直空间也越来越多,即内容会向下延伸,这称之为内容流。如果你习惯了使用像素和点进行设计,可能会觉得这个有点难掌握。不过习惯就好。
04_Flow-vs-Static-2

相对单位

你的设计对象可能是PC,也可能是移动端,或介于这两者之间。像素密度会不同,所以我们需要一种灵活的单位,百分比等相对单位就派上用场了。使用百分比时,我们说宽度50%就是表示宽度占屏幕大小(或者叫视区,也就是指所打开浏览器窗口的大小)的一半。
02_Relative-Units-vs-Static-Units-1

断点

断点可以让页面布局在预设的点进行变形,也就是说,在PC上显示3栏,在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形(这里可以参考)。断点位置取决于内容。比如,如果一句话要换行,你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系,很容易弄的一团乱。
03_With-Breakpoints-vs-Without-Breakpoints-1

最大和最小值

有时候,满屏内容显示的感觉不错,例如在移动端,但是同样的内容放到PC端再满屏显示就没有意义了。这就是为什么需要最大值跟最小值。例如,如果宽度为100%,最大宽度1000px,那么内容就会以不超过1000px的宽度填充屏幕。
Max-width-vx-No-max-width-1

嵌套对象

还记得相对位置吗?如果有一大推相互紧密联系的元素,那么就会很难去控制。将元素放到容器中,就会显得简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。
Nested-vs-Not-Nested-1

移动端优先或桌面优先

一个项目,从手机端显示再过度到PC端显示(移动优先),还是先在PC端显示再过度到手机端显示(桌面优先),两者差别不大。如果你想要移动端优先的话,会增加一些限制条件,并帮助你进行决策。通常都会两者都考虑,看哪种更适合你。
Desktop-first-vs-Mobile-first-3

Web字体 vs 系统字体

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

位图 vs 矢量图

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

原文出处:http://blog.froont.com/9-basic-principles-of-responsive-web-design/

赞(0)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 你能分得清”响应式(Responsive)”和”自适应(Adaptive)”网页设计吗?
分享到: 更多 (0)