响应式网页设计

名词解释

• 响应式web设计：

所谓响应式web设计就是网页内容会随着访问他的视口以及设备的不同而呈现不同的样式。（解释来自教科书）例子：中山大学南方学院文传网站

• IDE：集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。

• element：元素，tag：标签，property：属性，value：值，selector：选择器。stastement：声明

• CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。^[1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。^[2]

• html：HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

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

• SVG（Scalable Vector Graphics）可伸缩矢量图

为何需要"响应式网页设计"

截屏.png

如图，statcouner的是数据显示在2016年手机的市场份额开始超过桌面。并在之后一直不相上下，这表明用户不再是单独地使用某一种工具来浏览网页，浏览的屏幕大小也不断的变化，RWD的流式布局可以使网页在不同的屏幕尺寸中自我适应展现完整的网页信息，提高用户的使用感。

响应式网站的举例

• 采用响应式web设计的网站：新浪时尚以及Marcotte的网页 以下举例新浪时尚
  

  新浪时尚.png
  以上是新浪时尚在正常比例的网页界面
  新郎时尚2.png
  以上是在电脑把网页缩小后的界面，网页内容也能显示完整

• 没有采用响应式web设计的网站：亚马逊
  

  亚马逊.png
  以上是亚马逊在正常比例的网页界面
  亚马逊.png
  以上是在电脑被缩小后的界面，界面内容并不完整

RWD的三项组成科技

• 弹性网格布局
  像是响应式布局和自适应布局 流水布局能更好的适应不同尺寸的屏幕
• 弹性图片/媒体
  像 SVG（Scalable Vector Graphics）可伸缩矢量图
• 媒体查询

媒体查询是界面为了适应不同屏幕大小而存在的 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

RWD和前后端的关系

首先，前端的概念和后端是概念是：

Web前端:顾名思义是来做Web的前端的。这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

网页版、手机版、等等一起服务、设计、产出页面的是不需要依赖后端的RWD，分开服务、设计产出的是需要一来后端的RWD。 而基于HTML5和CSS3就可以制作不需要后端方案的RWD
（RWD可以使工程师不用PC端和手机分开来写）