一.什么是响应式设计
在现今市场上的所有媒体设备上，你的网站都能正确的工作，并有良好的显示效果。
二.创建响应式网站有哪些方面
1.HTML
使用HTML5标记，文档类型声明和初始缩放比，最大缩放比等等，具有清晰和语义化的HTML。
2.CSS
嵌入式样式，注意层叠的作用方式和元素继承规则。
盒模型：IE的盒模型和默认的chrome盒模型不同，注意区分
3.媒体查询
允许我们基于浏览网站的设备的特性来应对不同的样式声明，
@media only screen and (min-width: 40em){}//此处加上only是为了支持一些老的浏览器
@<link rel="stylesheet" href="style/css.css" media="only screen and (min-width: 40em)">//在样式表中加入媒体查询属性
<style media="only screen and (min-width:40em)"></style> //在页面的style元素的media属性中来包含媒体查询
@media url(styles.css) only screen and (min-width: 40em;)//导入样式表
可以查询视口宽度和高度，height,width,min-width,max-width。屏幕宽度和高度，device-width,device-height,设备屏幕的实际宽度和高度。方向，orientation，landscape(横排)，portrait(竖排)。宽高比，aspect-ratio视口宽高比，device-aspect-ratio设备屏幕宽高比。分辨率，resolution，未被chrome和safari支持。
4.浏览器支持
可以添加条件注释，缺点是增加额外的代码，条件注释出现在HTML中，可以用他来为IE8及其更早版本制定一个特定的样式表，
1 <!-- [if (lt IE 9)&(!IEMobile)] 2 ... //HTML代码放在中间，link链接外部样式表 3 <![endif]>
另一个选择是使用腻子脚本为旧版本的IE添加媒体查询支持，比如Respond.js一个快速，轻量级的为IE6-8添加min-width和max-width支持的js腻子脚本确定是会增加额外的代码到网站中，在不支持js的浏览器中不起作用，且只能用于min-width和max-width
5.响应式设计
渐进增强理念：第一层以HTML定义语义结构第二层以CSS定义表现层第三层以JS定义行为层。
网格设计理念：著名的bootstrap中就是用的12列布局
6.图像
图像属性中alt是必要的，title不必添加。能使用css来添加的图像问题就不要使用图像，
7.文本
使用rem或者em，溢出换行overflow-wrap:break-word;