自适应网页设计/自响应网页设计

Responsive Web Design

能自动识别屏幕宽度、并做出相应调整的网页设计
主要针对现在移动互联网,用户使用多种终端,浏览同一个网页的设计方案

起因

越来越多的智能移动设备加入到互联网中来,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕。

什么是响应式布局设计?

对工程师有美学要求,对设计师有工程要求,需要有跨学科综合工程能力的人

响应式设计的优缺点

对工程师有美学要求,对设计师有工程要求,需要有跨学科综合工程能力的人

优点

1.跨平台。
在手机,pad,电脑上均有不俗的表现。
2.节省人力开发成本。
不再需要有人特地维护PC页面,移动页面。
3.表现力一致
在不同的平台上看到的东西都是基本一致的,会让感觉体验良好。

缺点

1.自由度太低,局限性较大。
你需要考虑在手机,pad,PC上三种屏幕下的页面内元素的呈现,会导致有着非常大的局限,比如说我在PC上是横向滑动的通栏图,但是在手机和pad就是不用的。所以,你就只能用一张单一的图或者一组静态图来表达。
2.页面会比较大,在当前国内渣渣2G,3G网络下打开速度会比较慢。
由于响应式页面是同时下载多套CSS样式代码,可能在手机上就下载PC/pad的冗余代码,其实毫无意义,而且浪费了流量资源。
3.对于非webkit内核的浏览器支持极差(IE6,7,8等就直接悲剧了)。
对于非webkit内核的浏览器,比如说Windows Phone手机上用的IE浏览器,完全就悲剧了,彻底看不了。不过还好,现在的IOS,Android都是webkit内核,至少在80%以上的手机上可以有良好的呈现。

什么是响应式布局设计?

对工程师有美学要求,对设计师有工程要求,需要有跨学科综合工程能力的人

#7资源

需要更多的帮助?

你说对了!有成千上万的人学习Webflow的和网页设计的每一天。一个伟大的地方,开始是视频教程。然后头部到支持中心或社区论坛。 

(您可以点击上面的链接通过进入预览模式 - 在左上角的眼睛图标)