一、 什么是响应式设计
1、针对某些设备的某些特征可以由不同的样式，通过媒体查询对页面进行重构。响应式网站是一个设计理念，它是多项技术的综合体。
2、目的是一个网站能够兼容多个终端（电脑、手机、Pad等）设备，不需要为每个终端做不同的版本。采用响应式布局设计的网站能够根据显示屏幕的大小而变化，页面的排版布局可以自动进行调整，以适应不同尺寸的屏幕，从而为用户提供更方便的阅读和交互。响应式布局简单的说就是一套设计在pc端和移动端都可以使用，并都能给用户提供方便的服务。
二、几种响应式设计的方式
1、bootstrap框架的方式
2、尽量去使用百分比来进行样式宽度的控制，少用甚至不要去使用固定宽高。
3、使用css属性里面的媒体查询来进行元素的控制。
4、使用弹性盒子来进行开发，实现响应式开发。
练习：利用百分比进行响应式设计
缺点：内容不可变，小屏幕多内容，大屏幕少内容。
三、利用媒体查询
1、meta标签
<meta name ="viewport" content="width = device-width,initial-scale=1">
（1）viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
（2）参数设置∶
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
2、media query（媒介查询）
@media mediatype and|not|only (media feature) {CSS-Code;}
Mediatype:设备类型, all (所有设备)、screen(用于电脑屏幕，平板电脑，智能手机等。)、 speech（应用于屏幕阅读器等发声设备）、 print（用于打印机和打印预览）
media feature：媒体功能
<meta name=“viewport” content=“width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=“no” “>
<title>响应式< /title>
<style type=“text/css”>
Body{
background:#9F3;}
@media screen and (max-width:400px){
Body{
background:#306;}
}
</style>
</head>
<body>
</body>
练习：当页面宽度少于400px时，显示左图布局效果，当页面宽度大于600px时，显示右图布局效果。
源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable="no" ">
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
text-align:center;}
header,footer{
height:100px;
margin-top:5px;
}
header+article{
height:600px;
margin-top:5px;
}
header{
background:#F00;
}
footer{
background:#666;
margin-top:5px;
}
section,header+article>article,aside{
background:#FF0;
height:200px;
margin-bottom:5px;
}
@media screen and (max-width:400px){
div{
width:90%;
margin:auto;
}
}
@media screen and (min-width:600px){
div{
width:90%;
margin:auto;
}
section{
width:20%;
height:600px;
float:left;
}
header+article>article{
width:60%;
float:left;
margin-right:1%;
margin-left:1%;
height:600px;
}
aside{
width:18%;
float:left;
height:600px;
}
}
</style>
</head>
<body>
<div>
<header></header>
<article>
<section></section>
<article></article>
<aside></aside>
</article>
<footer></footer>
</div>
</body>
</html>
四、响应式断点
1、手机的屏幕比较小，宽度通常在600像素以下；PC
（ personal computer，个人计算机）的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768）
2、响应式设计一般对600px下，1000px上针对各版本做@media细化。设置相应的min-width和max-width值。
3、主要断点有：
第一个断点群体就是针对于智能手机设置，他的宽度是小于480px（<480px）
第二个断点是高智能移动设备，比如说Ipads设备，他的宽度是小于768px（<768px)
第三个断点就是针对于大设备，比如说PC端，他的宽度是大于768px(>768px)
4、其它几种断点：
添加一个小于320px的断点，针对于小型的移动设备；
还可以添加适用于平板设备的断点，大于768px小于1024px(>768px 和
最后还可以为超宽的桌面设置一个断点，大于1024px
5、设置断点把握三个要点：
满足主要的断点；
有可能的话添加一些别的断点；
设置高于1024px的桌面断点
五、字体响应
1、CSS3 规范引入了一个新的单位叫 rem，和 em 类相似，但相对于 HTML 元素来说， rem 更易于使用。
2、rem 是相对于 HTML 元素的。
3、使用rem单位，就按以下三个步骤来计算：
确定基数：一般10px（自己记住就行，不用写进代码里）
html {font-size:百分数;} 百分数=基数/16
基数10 百分数62.5%
基数14 百分数87.5%
基数16 百分数100%
px换算rem 公式=想要的px值/基数
也就是说，当你设置 html {font-size:100%;}，你想给容器里的文字设置字号14px，换算成rem就是0.875rem。
4、设置字体：
重置 HTML 的字体大小：
html{font-size:100%}
定义响应式的字体大小:
@media screen and (max-width: 600px){
body{
font-size:0.75rem;}
六、图片响应
1、使用width属性：如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能。
缺点：图片会比它的原始图片大
2、使用 max-width 属性：如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小
3、背景图片：背景图片可以响应调整大小或缩放。
（1）如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变。
（2）如果 background-size 属性设置为 “100% 100%” ，背景图片将延展覆盖整个区域.
（3）如果 background-size 属性设置为 “cover”，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例，因此 背景图像的某些部分无法显示在背景定位区域中。
4、不同设备显示不同图片
大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以可以使用媒体查询，根据不同的设备显示不同的图片。
5、HTML5 <picture> 元素
<audio controls>
<source src="背景音乐.mp3" type="audio/mp3">
<source src="背景音乐.ogg" type="audio/ogg">
<source src="背景音乐.wav" type="audio/wav">
</audio>
<picture> 元素类似于 <video> 和 <audio> 元素。可以设置不同的资源，可以设置多张图片，第一个设置的资源为首选使用的：
自学：掌握以下代码的功能及倍图的概念
<img class="image" src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w" sizes="(max-width: 360px) 340px, 128px">
七、响应式导航实例
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position:relative;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<div class="content">
<h2>响应式边栏导航实例</h2>
<p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。</p>
<p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p>
<h3>重置浏览器窗口大小，查看效果。</h3>
</div>
</body>
</html>
完成以下导航栏效果：
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<title></title>
<style>
/* nav */
nav {
position: relative;
margin: 20px 0;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
float:left;
}
nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
}
nav a:hover {
color: #000;
}
nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
nav {
position: relative;
min-height: 40px;
}
nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
nav li {
display: none; /* hide all <li> items */
margin: 0;
}
nav .current {
display: block; /* show only current <li> item */
}
nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
nav .current a {
background: none;
color: #666;
}
/* on nav hover */
nav ul:hover {
background-image: none;
}
nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
left: auto;
right: 0;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>
</body>
</html>
响应式网页测试平台：
http://www.wswl.net/a/html/
