css3媒体查询

什么是媒体查询

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：width、height和color（等）。使用媒体查询可以在不改变页面内容的情况下，为特性的一些输出设备定制显示效果。

媒体查询语法

CSS3中的媒体查询：根据浏览器窗口大小的改变，页面样式就会改变。

        body {
            background-color: #0033FF;
        }

        @media screen and (max-width: 960px) {
            body {
                background-color: #FF6699
            }
        }

        @media screen and (max-width: 768px) {
            body {
                background-color: #00FF66;
            }
        }

        @media screen and (max-width: 550px) {
            body {
                background-color: #6633FF;
            }
        }

        @media screen and (max-width: 320px) {
            body {
                background-color: #FFFF00;
            }
        }

上边的代码属于media的标准语法 表示在不同屏幕宽度下显示不同的样式