一、理解层面：
1、概念：响应式就是页面会根据不同屏幕分辨率的宽度，而改变自身的外貌。
2、实现过程：先有设计稿，一般是PC版、PAD版和移动端版本的一套设计稿，然后前端开发师才可以进行单位的换算，使用一套代码，多半是同样的标签组合，实现三版页面。
二、响应式实现方式
（1）最基本的重点：只要width不写为固定值，这个页面就可以认为是响应式的。实现效果就是随着页面大小缩放，元素位置也会有变化；
（2）设置最大宽度，当页面宽度小于最大宽度值时，页面宽度就会变成100%。最大不会操作最大宽度，小于就认定为100%
（３）当达到某一页面宽度值的时候，页面元素会自动分行，例如原来是3块一行，现在随之变成2块一行：使用媒体查询
先写默认样式，然后再写媒体查询，当达到某一条件时，对应就变化样式设置：
<style>
.cards{
list-style:none;
margin:0 auto;
padding:0;
overflow:hidden;
max-width:960px;
}
.cards li{
width:33.333%;
float:left;
box-sizing:border-box;
padding:10px;
}
@media (max-width:640px){
.cards li{
width:50%
}
}
@media (max-width:320px){
.cards li{
width:100%;
}
}
</style>
当页面宽度大于640px时，li的宽度就是33.33%，一行三列
当页面宽度小于等于640px时，li的宽度就会是50%，一行两列；
当页面宽度小于等于320px时，li的宽度就会是100%，一行一列；
（4）实习标题文字类的换行：
<div class="banner">
<h1 class="one-line">标题标题标题标题</h1>
<h1 class="two-line">标题标题<br/>标题标题</h1>
</div>
.banner .two-line{
display:none;
}
@media (max-width:320px){
.banner .one-line{
display:none;
}
.banner .two-line{
display:block;
}
}
依次例推，就是将两种页面宽度下的样式都实现（借助换行标签
等），然后通过媒体查询，控制两种样式的display样式的block/none的切换。
总结：
1、不要将width写为固定值px，而是转而使用百分比的方式；
2、使用max-width和min-width等这些最大最小高度、宽度的属性设置，需要时配合margin:0 auto；
3、使用媒体查询
4、写多个不同页面宽度下的预期样式，然后使用媒体查询进行切换。
