CSS3媒体查询@media的简单用法

使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式。常用来做响应式开发，一套代码可以兼容设备。提高代码的复用性和可移植性。
下面是简单的用法：

        /*当屏幕宽度 >= 300px时 运行这段代码*/
        @media screen and (min-width: 300px) {
                body {
                    background-color: skyblue;
                }
        }
         /*当屏幕宽度 >= 480px时 运行这段代码*/
        @media screen and (min-width: 480px) {
                body {
                    background-color: lightgreen;
                }
        }
         /*当屏幕宽度 <= 480px时 运行这段代码*/
        @media screen and (max-width: 480px) {
                body {
                    background-color: lightgreen;
                }
        }