【CSS】【媒体查询】快速理解css中的媒体查询@media

媒体查询关键字@media，用来判断设备参数，对不同类型设备采用不同的css样式，用法如下

        /* 对宽度大于735px的页面应用样式 */
        @media (min-width: 735px) {
            body {
                width: 735px;
            }
        }

        /* 对屏幕设备应用样式 */
        @media only screen {
            body {
                width: 735px;
            }
        }

        /* 对非打印设备应用样式 */
        @media not print {
            body {
                width: 735px;
            }
        }

        /* 对所有设备应用样式 */
        @media all {
            body {
                width: 735px;
            }
        }

        /* 多个条件取交集用and关键字 */
        @media only screen and (min-width: 735px) and (max-width: 1200px) {
            body {
                width: 735px;
            }
        }

        /* 多个条件取并集用逗号 */
        @media only print , only screen , (min-width: 1200px) {
            body {
                width: 735px;
            }
        }