@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面

例項：

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

@media 媒體型別and （媒體特性）{你的樣式}

1.最大寬度max-width

“max-width”是媒體特性中最常用的一個特性，其意思是指媒體型別小於或等於指定的寬度時，樣式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。

2.最小寬度min-width

“min-width”與“max-width”相反，指的是媒體型別大於或等於指定寬度時，樣式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：當螢幕大於或等於900px時，容器“.wrapper”的寬度為980px。

3.多個媒體特性使用

Media Queries可以使用關鍵詞"and"將多個媒體特性結合在一起。也就是說，一個Media Query中可以包含0到多個表示式，表示式又可以包含0到多個關鍵字，以及一種媒體型別。

當螢幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

未完待續。。