什么是响应式网页？
今天让我们一起来了解下什么是响应式网页呢？
小常说一下：
只做第一个我，不做第二个谁。
大家听说过响应式网页设计吗?何为响应式Web设计?如何去理解响应式网站呢?
响应式网站:就是网站上的网页可以自动适应以及自动缩放图片来适合不同屏幕分辨率;更深入理解响应式网站:这涉及到
响应式Web设计(Responsive Web design)的理念:它的页面设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、
屏幕定向等)进行相应的响应以及调整。具体的实践方式是由多方面组成，包括弹性网格和布局在内、图片、CSS media query
的使用等。
无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;.
换句话说，页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是-一个网站能够兼容多个终端一–而不是为每个终端做-一个特定的版本。这样，我们就可以不必为不断到
来的新设备做专门的版本设计和开发了。
什么是响应式网页
2000: 塞班、黑莓，GPRS，2.5G，可以浏览WML网页
2008: iOS/Linux，3G，Safari，可以浏览HTML网页
Android/Linux，Chrome，可以浏览HTML网页
Responsive Web Page 响应式/自适应网页，一个页面，可以在PC、平板、手机下正常/愉快的浏览。编写响应式应该在3方面加以注意：
(1)采用流式布局
(2)自适应的图片和文字大小
(3)CSS3媒体查询技术
如何测试响应式网页
三种测试方法：
(1)使用真实的物理设备来测试
优点：测试结果真实可靠
不足：测试工作量太大
(2)使用模拟软件来测试
优点：物理设备减少
不足：效率偏低，部分功能无法测试，测试结果有待进一步验证
(3)使用Chrome自带的设备模拟器来测试
优点：功能丰富(模拟多种设备、网速、经纬度、加速度…)
不足：测试结果有待进一步验证
响应式 Web 设计让你的网页能在所有设备上有好显示。
响应式 Web 设计只使用 HTML 和 CSS。
响应式 Web 设计不是一个程序或Javascript脚本。
设计最好的用户体验
友好的用户体验是网页可以在任何设备上展示和操作，设备包括桌面系统设备，平板电脑，iPhone等手机等。
网页应该根据设备的大小自动调整内容。
那么可以看如下图片：
桌面设备：
平板设备：
手机设备：
创建您自己的响应式设计
创建响应式设计的一个方法，是自己来创建它：
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>标题</h1>
<h2>Resize this responsive page!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
还可以使用：
使用 Bootstrap
另一个创建响应式设计的方法，是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>标题</h1>
<p>Resize this responsive page!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-md-4">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="col-md-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
总起来说，响应式网站它是一种利用 了各种计算机技术对网络页面进行设计，同-个网站可以在不同的终
端使用的网站。一旦企业建站采用了响应式网站建设模式，它就不需要网站设计者在根据不同的终端和分辨率
设备制定不同的版本网站了。这种网站的重点在于网络页面设计的布局，它集中页面图片的排版，能够自适应
不同用户在不同的设备环境下使用且不影响到阅读的效果。在了解了什么是响应式网站之后，我们再了解一下
它的优势和特点，从中便能得出为什么客户会信赖它的原因了:
一、使用了一套网站建设的代码，使用起来非常的方便
在响应式网站出现之前，人们在不同的设备间进行网站的宣传时需要设计和编制不同格式的网站代码,同
时还需要更改网站的域名和IP后方可使用在手机端或者其他设备上浏览网站。但使用了响应式网站模式之后则
省去了不同代码的编写，只需要使用自适应网页设计模式即可实现在不同的终端浏览网站，而且域名和IP也不
更改，这样的设计大大的提升了人们的工作流程效率。
二、随意的改变浏览器的大小
由于电脑，手机，平板等设备屏幕大小以及分辨率上的差异，此时的网站使用同一个浏览器模式设定明显
会让一些终端用户阅读起来非常的不方便。但此时的网站假如是响应式网站的话则可免去这些难点，在不同大
小的电子设备上通过自行调整浏览器的字幕大小，以及布局格式就可实现网站内容的阅读。
