CSS media 元素作用：

    在不改变内容的条件下，根据不同媒体设备的尺寸，自动切换布局，从而达到精确匹配设备。

CSS media 有两种作用方法：

    第1种、根据不同的尺寸调用不同的css文件：

例子：

<link rel="stylesheet"
 type="text/css" 
href="style600800.css" 

media="screen and 
(min-width: 600px) 
and (max-width: 800px)">

        例子，当页面宽度大于600px，小于800px，则调用style600800.css文件。

    第2种、直接写在css文件或者style元素里：

例子： 

@media screen and (min-width:600px) 
{
    .sidebar-left
    { 
        background-color: #000;
    }
}

        例子，当页面宽度大于600px时，class为sidebar-left的布局背景颜色变为黑色。