响应式网页设计

名词解释

• 响应式Web设计（Responsive Web design）

  • 使网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

  • 是一种统一的解决方案，可以让Web作品适配手机、平板和桌面电脑。为用户提供最佳设备体验。

  • 此名称是Ethan Marcotte,于2010 年所发明。

  • 需运用三种技术：弹性网络布局、弹性图片/媒体、媒体查询实现的解决方案。

  • 可参考Ethan Marcotte的文献 他在其中首次提及响应式Web设计。

• 响应式网站设计(简称RWD)

  • 是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。——百度百科

• 前后端（front end and back front）
  - 前端为就是展现给网民看到的部分的技术开发；后端为就是展现给网民看到的部分的技术开发，也指程序开发。

从前面我们讲的响应可以看到，响应是双方的，是互动的过程，在这个过程中我们要考虑双方的承受能力，比如我们总不能让小孩子扛大包。在咱们网页设计方面就是咱们要考虑设备的性能，从网速、Dom 节点数量、屏幕的大小等等，如果我们从前后端结合，对小孩子给糖果，给苦力大包，那样就做到了响应式。——联合企邦建站的“如何理解响应式设计（RWD）”

• Web标准

  • 并不是某一个标准，而是由W3C和其他标准化组织指定的一系列标准的集合，包括HTML、CSS、Javascript等。
    -网页内容由于不同浏览器解析出来的效果可能不一致，开发者需通过Web标准为多版本展示同一内容而努力开发。
  • 其优点为：提高页面浏览速度、使网站更易于维护、降低网站流量费用、更容易被搜寻引擎搜索、内容能被更广泛的设备访问、让Web的发展前景更广阔。
  • 其构成为：结构标准（如房子的框架，人的骨骼）、表现标准（如房子的装修，人所穿的衣服鞋子，更美观）、行为标准（人的行走、跳跃，房子的内部设施，具有功能性）。

• HTML(Hyper Text Markup Language) 超文本标记语言

  • 主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
  • HTML语言发展至今，已有六个版本，HTML5于2014年10月底定稿。
  • XHTML是更严谨纯净的HTML版本，数据转换能力强大。

• CSS

  • 通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
  • 其属性：颜色（color）、背景（background）、浮动（float）
  • 媒体查询为其中一模块，可以根据设备的能力应用特定的CSS样式，如根据视口宽度、屏幕宽高比和水平朝向或垂直朝向等。

• JavaScript

  • 是Web页面中的一种脚本语言，通过其可以将静态页面转变成支持用户交互并响应相应事件的动态页面。
  • 在网站建设中。JavaScript用于为页面添加动态效果。

网页构成要素

• Internet网络：指所说的互联网，是一些使用公用语言互相通信的计算机连接而成的网络。

• WWW（World Wide Web）： 是Internet提供的一种网页浏览服务。

• URL(Uniform Resource Locator):指“统一资源定位符”，俗称“网址”。

• DNS（Domain Name System)：域名解析系统。

• HTTP（Hypertext tranfer protocol）:中文译名“超文本传输协议”，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。

• Web：通常指互联网的使用环境。对于网站制作者来说，是一系列技术的复合总称。通称为“网页”。

• W3C（World Wide Web Consortium）:万维网联盟是国际最著名的标准化组织。

为何要使用响应时网页设计？

随着移动手机用户的增多，今年来数量多达可占全国数量一半以上。加上不同用户会会根据个人使用不同浏览器。

使用与不使用响应式设计的效果图比较：

使用效果：Common culture

PC版 手机版

无使用的效果：WOMEN LATIV

PC版 手机版

通过比较，可以看到无采用响应式Web设计的网页，在手机移动端中，使用较麻烦，较小的连接难以按触，用户体验不佳。

伴随着移动终端价格的下降及wifi的广泛铺设，移动网民呈现爆发趋势。使用移动端浏览网站成为了用户的习惯，因此拥有一个可以适应多种屏幕的网站建设就显得尤为重要了。