媒体查询

demo01

body{
            background-color: yellow;
        }
        /*媒体查询*/
        @media only screen and (min-width:1200px ) {
            body{
                background-color: pink;
            }
        }
        /*浏览器的宽度是，大于等于992并且小于等于1199px时*/
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            body{
                background-color: blue;
            }
        }
        /*如果这个max-width和上面的min-width没有衔接上，那么没衔接上的部分用默认样式*/
        @media only screen and (min-width: 600px) and (max-width: 800px) {
            body{
                background-color: orange;
            }
        }
        /*小于等于500px时*/
        @media only screen and (max-width: 500px) {
            body{
                background-color: green;
            }
        }

demo02

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="320.css" media="only screen and (max-width:320px)"/>
    <link rel="stylesheet" type="text/css" href="480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>

demo03

*{
    padding: 0;
    margin: 0;
}
#box div{
    float: left;
    background-color: pink;
    width: 25%;
    border: 1px solid black;
    box-sizing: border-box;
}
@media only screen and (min-width: 1200px) {
}
@media only screen and (min-width: 800px) and (max-width: 1199px) {
    #box div{
        width: 33.3%;
    }
    #box img{
        width: 100px;
    }
    #box span{
        font-size: 20px;
    }
}
@media only screen and (min-width: 550px) and (max-width: 799px) {
    #box div{
        width: 50%;
    }
    #box img{
        width: 130px;
    }
    #box span{
        font-size: 30px;
    }
}
@media only screen and (max-width: 549px) {
    #box div{
        width: 100%;
    }
    #box img{
        width: 150px;
    }
    #box span{
        font-size: 40px;
    }
}