响应式网站设计

专业术语

• 响应式Web设计（RWD）：网页内容会随着访问它的视口及设备的不同而呈现不同的样式，相关的基本要素：弹性布局、弹性图片和媒体查询。
  （http://www.alistapart.com/articles/responsive-web-design/）

• HTML：超文本标记语言，准通用标记语言下的一个应用。“ 超文本”就是指页面内可以包含图片、 链接，甚至音乐、 程序等非文字元素。超文本标记语言的结构包括 “头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的 具体内容。

• CSS:层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表：外部样式表、内部样式表和内联样式。

• JavaScript：一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式的宿主环境提供支持，被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox等）支持。

• 最小宽度媒体查询：在这个媒体查询中设置的CSS规则，只在视口符合最小定义宽度条时才会应用到网页。实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px。

• 断点：某个宽度临界点，跨过这个点布局会发生显著变化。

主要问题

RWD的三项组成科技

弹性网格布局（fluid grid）：网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。CSS网格布局具有以下特点：

---- 固定的位置和弹性的轨道的大小：你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。

---- 元素位置：你可以使用行号、行名或者标定一个网格区域来精确定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。

---- 创建额外的轨道来包含元素：可以使用网格布局定义一个显式网格，但是根据规范它会处理你加在网格外面的内容，当必要时它会自动增加行和列，它会尽可能多的容纳所有的列。

---- 对齐控制：网格包含对齐特点，以便我们可以控制一旦放置到网格区域中的物体对齐，以及整个网格如何对齐。

---- 控制重叠内容：多个元素可以放置在网格单元格中，或者区域可以部分地彼此重叠。然后可以CSS中的z-index属性来控制重叠区域显示的优先级。

弹性图片（flexide images）：不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。

媒体查询（media queries）：让我们在某些条件下（如宽度和高度为多少的情况下）为网页应用样式。

RWD与前后端的关系

-- 前端（frontground）：网页伺服器，API伺服器

-- 后端（background）：数据库/云端

在访客至数据库/云端之间，前端的网页伺服器与API伺服器处理将用户的数据经过处理上传的数据库或者云端，由后端进行数据分析及连接，然后反馈给前端呈现出网页。

proxy.png

-- 需要依赖后端方案的RWD：
网页版、手机版、等等分开服务、设计、产出页面

-- 不需要依赖后端方案的RWD：
网页版、手机版、等等一起服务、设计、产出页面

-- 基于HTML5和CSS3就可以制作不需要后端方案的RWD

为什么需要响应式Web设计？

• 以前的网站固定宽度通常为960px，而比这个更宽的电脑设备飞速发展

• 全球手机浏览器的使用量开始超过PC浏览器

• 响应式Web让Web作品适配手机、平板和桌面电脑，适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。

• 仅使用HTML5和CSS3，而不用后端支持。
  （http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet）
  

  屏幕分辨率统计-201702-201802.png

采用了响应式Web设计的网站（https://www.bbc.co.uk/）
未采取响应式Web设计的网站（http://www.nfsysu.cn/）