响应式的实现

一、理解层面：

1、概念：响应式就是页面会根据不同屏幕分辨率的宽度，而改变自身的外貌。
2、实现过程：先有设计稿，一般是PC版、PAD版和移动端版本的一套设计稿，然后前端开发师才可以进行单位的换算，使用一套代码，多半是同样的标签组合，实现三版页面。

二、响应式实现方式

（1）最基本的重点：只要width不写为固定值，这个页面就可以认为是响应式的。实现效果就是随着页面大小缩放，元素位置也会有变化；
（2）设置最大宽度，当页面宽度小于最大宽度值时，页面宽度就会变成100%。最大不会操作最大宽度，小于就认定为100%
（３）当达到某一页面宽度值的时候，页面元素会自动分行，例如原来是3块一行，现在随之变成2块一行：使用媒体查询
　　先写默认样式，然后再写媒体查询，当达到某一条件时，对应就变化样式设置：

当页面宽度大于640px时，li的宽度就是33.33%，一行三列
当页面宽度小于等于640px时，li的宽度就会是50%，一行两列；
当页面宽度小于等于320px时，li的宽度就会是100%，一行一列；

（4）实习标题文字类的换行：

  
标题标题标题标题
  
标题标题
标题标题

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