响应式网页设计

名词解释

• 响应式Web设计(Responsive web design)：

-响应式web设计是基于HTML5和CSS3的RWD（Responsive Web Design）响应式web设计。
-响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。
-网页内容会随着视口（viewport）及设备（device）的不同而呈现不同的样式（style）。
-利用弹性网络布局（fluid grid）、弹性图片/媒体（flxible images）、媒体查询（media queries）等技术实现。

• HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

• CSS3

CSS3是CSS（层叠样式表）技术的升级版本。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

• Web基本概念

-Web标准由结构标准、表现标准、行为标准构成
-结构标准用于对网页元素进行整理和分类，主要包括两个部分：XML和HTML
-标准表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
-行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript

• 网页

-网页就是网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频以及flash等。
-Internet网络：就是互联网，由一些使用公共语言互相通信的计算机连接而成的网络
-WWW：WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务
-URL：URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符” URL其实就是Web地址，俗称“网址”。
-DNS：DNS （英文Domain Name System的缩写）是域名解析系统。
-HTTP：HTTP (英文Hypertext transfer protocol的缩写) 中文译为“超文本传输协议”，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
-W3C：W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。

HTML三要素

• <标签 属性=“值”>
• Elements/tags 元素标签
• Properties 属性：标签可以拥有属性
• Values 值：属性总是以名称/值对的形式出现

CSS三要素

• 选择器 {属性：值}
• Selectors 选择器
• Statements 声明
• Properties 属性：希望设置的样式属性（style attribute）。每个属性有一个值。
• Values 值

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

• 通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整，页面液态图片技术布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。（来自百度知道）

• 2010年（响应式网页设计被提出）与2012年（响应式网页设计流行）所有平台的对比图

2010.png

2012.png

从各平台数值波动可看出响应式网页设计对各个平台都有不小的影响

• 2010年与2012年手机、台式与平板的对比

2010 vs.png

2012 vs.png

2010年平板还没流行，在响应式网页设计流行后，各平台的使用率都有提升

运用了响应式网页设计的网页与没运用响应式网页设计的比较

-首先使运用了RWD的乐视TV（https://www.letv.com/）

乐视.png

乐视iPhone7（1）.png

乐视iPhone7.png

-再来观察没有使用RWB的芒果TV（https://www.mgtv.com/）

mgtv iPhone7.png

mgtv.png

很明显用了RWD的乐视TV会比没用RWD的芒果TV在手机的体验会更好。而更好的前端展示必定有着更好的后端操作