响应式布局

html5，css3，通过 @media query实现响应式布局

例如：

外部应用：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

内嵌方式

当页面视图区域小于600px宽度的时候，css会被使用到。

Max-Width

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

Min-Width
　　当视图区域大于900px宽度的时候，css会被使用到。
  
  

   
   
@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}
  
  
多个 Media Queries
　　你可以把多个media queries组合在一起，当视图区域宽度在600px到900px之间的时候，会使用下面的css。
  
  

   
   
@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}
  
  
设备Width
　　下面的css会在 max-device-width为480px的时候使用，例如iphone。
　　note：max-device-width指的是设备实际分辨率，max-width指的是可是区域尺寸。
  
  

   
   
@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}
  
  

语法结构及用法
  
  

   
   
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}