CSS中@规则是由@符号开始的，例如@import，@page等。

@media就是其中的一个规则。

@media可以让你根据不同的屏幕大小而使用不同的样式，这可以使得不需要js代码就能实现响应式布局。

不过@media只能用于较新的浏览器，对于老式的IE，不支持。下面是@media支持的浏览器。

@media的语法比较简单，一眼就能看懂。

@media mediatype and|not|only (media feature) {

 
    CSS-Code; 
}

可以参考值的说明。

其中mediatype就是媒体类型，可以包括好多种，最常用的就是screen，其他多数已经作废。

media feature就定义了这个media设备的一些特征，简单的说就是媒体满足什么条件，常用的就是max-width，min-width。

通过指定屏幕的大小，而采用不同的样式。

举个例子演示如何用@media规则实现响应式布局。

     
          
          
          
      
               .contain {             925px;            margin:0 auto;        }        .c1 {            width: 300px;            height: 100px;            float: left;            margin: 2px;            background-color: yellowgreen;        }        @media only screen and (min-width: 620px) and (max-width: 930px) {            .contain {                width: 610px;                margin-right: auto;                margin-left: auto;            }        }        @media only screen and (max-width: 620px) {            .contain {                width: 300px;                margin: 0 auto;            }        }        
       
                
        
                 
         
                  
          
                   
           
                    
            
                     
             
                  
             
            
           
          
         
        
       
      
     
-----------------------------------------
@media only screen and (min- 620px) and (max-width: 930px)@media only screen and (max- 620px)上述2个规则，当屏幕宽度在620px以下，和620px-930px，使用的contain样式是不同的。
截图：
当浏览器宽度在1024px的情况下，显示效果如下：
 
    
 
    
当浏览器宽度在680px的情况下，显示如下：
 
    
 
    
 
    
当浏览器宽度在480px的情况下，显示如下：