@media 媒體查詢

@media screen and (max-width: 300px) {

    //當視口寬度小於等於300px時生效

}

max-width  相當於  <= 

@media screen and (min-width: 300px) {

    //當視口寬度大於等於300px時生效

}

max-width  相當於  >= 

@media screen and (min-windth:300px) and (max-width:600px) {

    //當視口寬度介於300px 和 600px 之間時生效

}

大於等於多少，小於等於多少的寫法。

舉例：

body{
    background: orange;
}
@media screen and (max-width:1200px) {
    body{
        background: green;
    }
}
@media screen and (max-width:1000px) {
    body{
        background: blue;
    }
}

起初，背景色是orange；

逐漸縮小視口到1200px，繼續縮小，背景色變為green；

繼續縮小至1000px，變為 blue。