响应式的实现

一、理解层面：

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、写多个不同页面宽度下的预期样式，然后使用媒体查询进行切换。