CSS @media

.outside{
    width: 500px;
    height: 300px;
}


/*写一个色块，x>1000黄色，800<x<1000绿色，500<x<800红色，x<500灰色*/
@media screen and (max-width: 500px){
    .outside{
        background: gray;
    }
}

@media screen and (min-width: 500px) and (max-width: 800px){
    .outside{
        background: red;
    }
}

@media screen and (min-width: 800px) and (max-width: 1000px){
    .outside{
        background: green;
    }
}

@media screen and (min-width: 1000px){
    .outside{
        background: yellow;
    }
}