1.1 响应式网页设计的概念
响应式网页(Responsive Web Design,通常缩写RWD)的概念是Ethan Marcotte在2010的时候,在他A List Part的文章中提出来的:网页设计应该要根据不同设备环境灵活转换和调整,能够适应不同显示设备的分辨率大小,如台式电脑、笔试本电脑、平板、手机等等,同时减少缩放、平移和滚动。
1.2 响应式网页设计与自适应网页设计的区别?
自适应网页设计与响应式网页设计的概念区别好像众说纷纭,但目前个人觉得好像对业界来说,过分纠结这两者的意义也不大,大略了解下便可,最重要的是找到最适合自己网站的设计、采用最适合的技术。
这两个概念的提出都是基于越来越多的终端设备的出现背景,都旨在使用技术来使网页能够从小到大来适应不同分辨率的屏幕。有说法是:响应式网页设计是自适应网页设计保护的一个子集。
响应式网页设计的概念是Ethan Marcote在他的文章中提出的:响应式网页设计是采用CSS的media query技术,配合流体布局(fluid grids)和可以自适应的图片视频等资源素材。这是通过HTML和CSS就可实现的。而且,响应式设计是采用流体+断点(break point)的,在遇到断点改变页面样式之前,页面是会随着窗口大小自动缩放的(fluid grids)。响应式设计是倾向于在不改变内容的前提下,改变呈现的外观布局。
自适应设计是Aaron Gustafson提出的,他提出自适应设计是在使用响应式的CSS media query技术之外,还要通过Javascript来操作HTML来让网页更加适应移动设备。且自适应设计是在针对特定几种分辨率进行优化(e.g. 1280px, 800px, 640px),在断点之间的过渡较少。自适应设计还可能会根据移动端情况来减少部分功能和内容。
2. 响应式网页设计的优缺点是什么?
1.1 优点
①跨平台:响应式网页设计本身最大的特点;
②节省开发成本:不用根据不同设备来进行开发维护;
③在不同平台上的表现内容保持一致性,体验良好;
1.2 缺点
①局限性大,自由度低:因为在设计时要考虑不同设备的呈现效果,必然会导致在设计表现方式等方面会有更多的局限性;
②会影响加载速度,也会导致不必要的流量浪费:为了适配不同的设备,响应式页面需要大量为不同设备打造的CSS样式代码,这样便会影响页面的加载速度。而且页面中图片视频资源一般是统一加载,因而在低分辨率的设备上,会加载了大于它显示要求的图片视频,这也会影响加载速度且导致流量浪费。当用户在网络状态不良好的情况下打开网页时,可能会造成很不好的体验;
③部分浏览器的支持问题:对于非webkit内核的浏览器支持极差,不过目前来说这个问题应该不大了。
3. 小结
响应式网页设计是给不同设备的用户都提供一样的内容,但根据不同设备的状况来分别设计,能够更加充分地发挥出不同设备的优势来。
虽然响应式网页设计有着它很明显的优势,但使用与否,还是需要慎重考虑是否符合自己网页的页面类型。像对于内容型资讯型的网站,它们的页面结构较为简单,确实适合响应式页面,能够在保证各个设备都能被良好设计和呈现的局限条件下,减少对不同设备的开发成本。但对于大型门户网站、电商网站来说,它们的页面内容非常多,响应式网页设计恐怕就不适合它们了。像天猫、淘宝,如果要在适配网页端和移动端的局限条件下设计网页,就要舍弃掉很多的设计可能性了,响应式网页设计带来的成本减少可能也会极大地减少了它收益。这还不如为网页、移动端分别来设计,以得到一个最适合网页端的设计和最适合的移动端的设计,以最大化自身的收益。