响应式Web设计(二):响应式Web设计的概念

  首先感谢你们对第一篇背景介绍一文的支持,今天将对响应式Web设计的概念进行一个大概的介绍,固然这一篇也不是什么干货,只是做为一个主题来讲,概念的介绍必不可少,下一篇就应该有点干货了。 android

  从背景介绍一文中,咱们能够获得这样一个结论:互联网正在快速迅猛地向移动终端发展,这样对于网页就有了一个Anywhere的需求。其实网页的Anywhere就是响应式Web设计,说的再白一点,就是为了省时省力省钱,一次开发出来的网页,用一个URL,能够在不一样终端设备上有不一样的呈现方式。下面四张图就是一张网站所做的响应式设计。 ios

      

  

      OK!概念就是这样的,本人一直以屌丝自居,因此这个定义也多少带着点屌丝的意味,娱乐一下。。。呀,有点冷,不闹了,下面咱们看看这种多种终端设备要求网页不一样呈现方式的需求下,都作过哪些尝试呢? 网络

  • 网页代码的单纯转换:为了让用户在手机这种移动设备上同样能够访问咱们PC端网页,咱们最初的响应式Web设计的尝试就是开发同窗单纯的把PC端网页的源代码直接转换成WAP对应的代码。
  • 使用一些建站工具快速地搭建移动WAP网站。
  • 针对不一样的终端设备开发不一样的版本,最多见的就是PC版本 + 移动版本,事实上我如今的工做很大程度上仍是停留在这个层次上,在给一家著名的电商网站定制开发其对应的移动版本。其实这种定制化开发从开发、设计、更新、维护各个过程来讲,工做量仍是挺大的,可是谁让咱目前的工做就干这个呢,只要老板给钱,就得好好干。
  • 经过PhoneGap框架将Web进行App化,可是APP化工做量巨大、用户必须下载安装、推广渠道复杂繁琐、SEO和他几乎绝缘。

   由于我如今主要是从事移动终端设备的Web开发工做,事实上在我平常工做中设计到响应式Web设计主要是在各类移动终端中的响应式设计。因此我我的对于响应式Web设计的理念是:根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向、屏幕分辨率等)对页面内容和布局进行相应的响应和调整。具体的实现方式有弹性网络、布局、图片、CSS三、JS、HTML5等的使用。这样不管用户用android设备仍是ios设备,不管用户用手机仍是pad平板,咱们都可以自动调整页面来适用用户不一样的设备。 架构

  从背景介绍一文中,不难看出,如今移动互联网发展的浪潮愈来愈猛,因此我的建议,在作响应式Web设计的时候采用逐步加强的模式进行开发,先让你的移动网站支持手机竖屏→支持用户横屏行为→支持各类屏幕大小的手机→支持不一样系统版本的手机(主要是android设备和ios设备)→支持pad平板→……同时针对移动网站设计和开发的一些规则和建议的总结,在我另一篇文章《初探移动网站的架构和设计》中作了介绍,这里再也不赘述。 框架

   响应式Web设计的概念就介绍到这里吧,最后总结一句:响应式Web设计并非单纯地根据用户行为和设备环境进行简单的网页内容的调整和呈现方式的不一样,它实际上是一种全新的Web设计方式,而这种全新的设计方式的最终用途到底是什么呢?其实就是一个字:爽,让用户用的爽才是王道! 工具

相关文章
相关标签/搜索