媒体查询的使用方式

一、媒体查询

@media all and （max-width：600px（条件值））{
选择符{样式}
}
主要包含两个方面：媒体类型 函数
默认值写在最前面,或者给媒体查询样式添加important.
如果要使用max-width，条件值比较大的写在前面。
如果要使用min-width，条件值比较小的写在前面。
@media all and (max-width:600px) {
div {
background: blue !important;
}
}
例子：

<style>
        html,
        body {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        @media all and (min-width:320px) {
            body {
                background: red;
            }
        }

        @media all and (min-width:375px) {
            body {
                background: blue;
            }
        }
    </style>
使用方式：
1：一个端为主项目，它的样式是我们正常写的
2：需要兼容的端，它的样式我们卸载媒体查询
3:兼容性问题：ie10以下不兼容