使用 @media 可以針對(duì)不同的媒體類型定義不同的樣式。

下面這段代碼就是如果文檔寬度小于 300 像素則修改背景演示(background-color):

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

@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。
<h5>CSS用法：</h5>

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

我在代碼中遇到的是如下這種情況：

media="screen"

查詢文檔可以知道screen媒體類型是——用于電腦屏幕，平板電腦，智能手機(jī)等。