响应式布局——媒体查询

媒体查询：针对不同的媒体类型定义不同的样式

1、定义和使用：

  @media  screen and (max-width：像素) and (min-像素){
        /*在像素的范围的时候下面进行的一些变化设置*/
  }
  

 @media screen and (max-768px) {
        .centerL,
        .centerC,
        .centerR {
          100%;
        }
    }

2、媒体类型

  all 所有设备
  print 打印和打印预览
  screen   电脑屏幕、平板电脑、智能手机等

3、媒体功能

  device-height：屏幕可见高度
  device-width： 屏幕可见宽度
  max-width：最大的宽度
  min-width :最小的宽度
  **orientation：定义输出设备中的页面可见区域高度是否大于或等于宽度**