CSS 媒體查詢的應用非常地廣泛，昨天的單元 「Day11 - 在元素上應用響應式斷點」，就是使用媒體查詢的一種形式，Master CSS 提供了一系列媒體查詢的語法（使用 @ 開頭）。

響應式斷點

讓我們複習一下上個單元介紹的響應式斷點，使用 @斷點 的形式加在屬性後面。

<h1 class="f:24 f:32@sm f:40@lg">Hello World!</h1>

.f\:24 {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .f\:32\@sm {
    font-size: 2rem;
  }
}

@media (min-width: 1280px) {
  .f\:40\@lg {
    font-size: 2.5rem;
  }
}

列印模式

有時候我們需要針對列印的頁面做調整，例如某些區塊在列印的時候要隱藏，或是列印的時候才顯示，這時候我們可以使用 @print 語法加在屬性後面，下面來舉個例子：

希望區塊在 "列印的時候隱藏”。

<div class="hide@print">Hide on print mode</div>

@media print {
  .hide\@print {
    display: none;
  }
}

希望區塊在 "列印的時候才顯示"。

<div class="hide block@print">Show on print mode</div>

.hide {
  display: none;
}

@media print {
  .block\@print {
    display: block;
  }
}

總結

本日 codepen 連結

這個單元介紹了媒體查詢常用的兩種形式，分別是響應式斷點 @斷點 以及列印模式 @print，Master CSS 還有提供其他的語法供不同情境使用。

參考

• Master CSS 官網 - 媒體查詢