例 1

.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;
    }
}

可以把min-width和max-width理解為區間。

CSS @media