响应式网页设计

名词解释

响应式web设计：

“响应式网页设计”（Responsive web design 简称“RWD”）是一种网络页面设计布局，是一种统一的解决方案，可以让作品适配手机、平板和桌面电脑。

“响应式web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart 上写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/）,这篇文章综合运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式web设计”。

视口(viewport)：

浏览器中用于呈现网页的区域叫“视口”

视口通常并不等于屏幕的大小，特别是可以缩放浏览器窗口的情况下。

Web前端:

顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web后端：

后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

断点：

就是某个宽度的临界点，跨过这个点布局就会发生显著变化。

CSS(层叠样式表)

(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

---

为什么需要“响应式web设计”

360截图20180313143456359.jpg

StatCounter-comparison-ww-monthly-201702-201802.png

据数据可得出，全球移动设备的使用量占市场份额最大，这也说明大多数人趋向手机浏览器来获取信息查看网站，而现实中网页在电脑屏幕与手机屏幕间的转换会出现布局不均等问题，据此，解决因设备屏幕之间的差距而出现的布局不均等问题是大势所趋，是必须的。
而基于HTML5和CSS3的“响应式web设计”，可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备、浏览器能力）而变化，是为当前所需求的。

---

例子

RWD例

Andersson-Wise Architects(http://www.anderssonwise.com/)

02e33f567386f30000011a173001b2.jpg

整个网站页面包括三个主要部分，每个部分都是以图片为背景。这个灵活的解决方案有效地为每个标准屏幕尺寸都匹配了一个恰当的布局。为读者提供了舒适灵活的网页内容。

非RWD例子

微信公众号登陆页面：

360截图20180313173658346.jpg

---

响应式web设计的三种组成科技

弹性布局

又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。

两个基本概念:
容器： 需要添加弹性布局的父元素；
项目： 弹性布局容器中的每一个子元素，称为项目；
两个基本方向:
主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
交叉轴： 与主轴垂直的另一方向，称为交叉轴。

响应式图片

响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。

媒体查询

媒体查询是CSS3规范的其中一个模块。利用媒体查询，可根据设备的能力应用特定的CSS样式。

比如，可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。

---

web前端和后端的关系

web前端分为网页设计师、网页美工、web前端开发工程师。首先网页设计师是对网页的架构、色彩以及网站的整体页面代码负责网页美工只针对UI这块的东西，比如网站是否做的漂亮，web前端开发工程师是负责交互设计的，需要和程序员进行交互设计的配合。

web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术，ajax和jquery以及简单的后端程序等。 后端的话可供开发的语言有 asp、php、jsp、.NET 这些后端开发语言的话搭建环境都不一样

简而言之，两者分别是台前与幕后的角色

---

（本篇内容分别来自：网络，《响应式web设计HTML5和CSS3实战（第二版）》）