3.1.2 媒體描述 Media Features

範例 1：min-width

當螢幕寬度大於等於 768px 時，連結<a> 的文字顏色會變成紅色。

以下的語法中，Media Type 是 all，然後進一步的描述部份，用小括號包起來：

@media all and (min-width: 768px){
  a{
    color: red;
  }
}

當 Media Type 是 all 的時候，可以省略不寫，如下：

@media (min-width: 768px){
  a{
    color: red;
  }
}

例：

範例 2：max-width

當螢幕寬度小於等於 767.98px 時，連結<a> 的文字顏色會變成綠色。

@media (max-width: 767.98px){
  a{
    color: green;
  }
}

例：

下圖參考網址：https://getbootstrap.com/docs/5.3/layout/breakpoints/

為什麼要減去 0.02px？目前瀏覽器尚不支援 range context queries，因此透過使用更高精準度的小數點，來解決 min-width 、 max-width 以及具有小數點寬度的螢幕視窗所造成的問題。 (例：min-width: 768px、max-width: 768px。)

範例 3：結合 min-width 與 max-width

當螢幕寬度大於等於 768px 且小於等於 991.98px 時，連結<a> 的文字顏色會變成橘色。

@media (min-width: 768px) and (max-width: 991.98px){
  a{
    color: orange;
  }
}

例：

範例 4：結合 Media Type

當是螢幕時，螢幕寬度大於等於 768px 且小於等於 991.98px 時，連結<a> 的文字顏色會變成紅色。

@media screen and (min-width: 768px) and (max-width: 991.98px){
  a{
    color: red;
  }
}

例：

範例 5：Media Query 的「或」

以半型逗號做分隔。

@media screen and (min-width: 1200px), screen and (max-width: 767.98px){
  p{
    color: blue;
  }
}

範例 6：orientation

orientation 可以設定當手持裝置是橫向或縱向時，需要套用的 CSS，可以設定的值有：

• portrait (縱向)

• landscape (橫向)

語法：

@media screen and (orientation: landscape) {
  a{
    color: red;
  }
}

@media screen and (orientation: portrait) {
  a{
    color: blue;
  }
}

示範 Media Query 的 orientation