是时候复习一下响应式设计了

一、什么是响应式设计

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/