媒体查询适配

        
    // 移动端适配
        body {
            background-color: green;
        }
        @media screen and (min-width: 769px) and (max-width: 992px) {
            body {
                background-color: pink;
            }
        }
        @media screen and (min-width: 993px) and (max-width: 1199px) {
            body {
                background-color: yellow;
            }
        }
        @media screen and (min-width: 1200px ) {
            body {
                background-color: hotpink;
            }
        }

        /* 可以进行简写 min-width 向上适配是 是从开始的小到最后的大；*/
        /* min-width是向上适配时，是从小到大 */

        body {
            background-color: green;
        }
        @media screen and (min-width: 769px) {
            body {
                background-color: pink;
            }
        }
        @media screen and (min-width: 993px) {
            body {
                background-color: yellow;
            }
        }
        @media screen and (min-width: 1200px) {
            body {
                background-color: hotpink;
            }
        }

        /* max-width是向下适配，从大到小 */

        body {
            background-color: hotpink;
        }
        @media screen and (max-width: 1200px) {
            body {
                background-color: yellow;
            }
        }
        @media screen  and  (max-width: 993px) {
            body {
                background-color: pink;
            }
        }
        @media screen and (max-width:769px ) {
            body {
                background-color: green;
            }
        }