響應式網頁設計

響應式網頁設計（Responsive Web Design）已經是網頁開發必備的一項技術，其原理是根據使用者的裝置、視窗寬度自適應網頁佈局。

它的做法是透過 CSS 的媒體查詢，根據不同斷點給予相對應的屬性。

<h1 class="title">Hello World!</h1>

.title {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .title {
    font-size: 2rem;
  }
}

@media (min-width: 1280px) {
  .title {
    font-size: 2.5rem;
  }
}

預設斷點

Master CSS 官方提供多達十組的預設斷點，已經能夠符合大部分使用者的裝置。

class | properties | description
------------- | -------------
@3xs | @media (min-width: 360px) { } | iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One …
@2xs | @media (min-width: 480px) { } | Blackberry Passport / Amazon Kindle Fire HD 7 …
@xs | @media (min-width: 600px) { } | LG G Pad 8.3 / Amazon Kindle Fire …
@sm | @media (min-width: 768px) { } | Microsoft Surface / iPad Pro 9.7 / iPad Mini …
@md | @media (min-width: 1024px) { } | iPad Pro 12.9 / Microsoft Surface Pro 3 …
@lg | @media (min-width: 1280px) { } | Google Chromebook Pixel / Samsung Chromebook …
@xl | @media (min-width: 1440px) { } | Macbook Air 2020 M1 / MacBook Pro 15 …
@2xl | @media (min-width: 1600px) { } | Dell Inspiron 14 series …
@3xl | @media (min-width: 1920px) { } | Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …
@4xl | @media (min-width: 2560px) { } | Dell UltraSharp U2711 / Apple iMac 27-inch …

基本用法

以下方的程式碼為例，手機版文字大小是 24px = 1.5rem、視窗寬度 768px（對應 Master CSS 的 @sm） 以上時，文字大小改為 32px = 2rem、視窗寬度 1280px（對應 Master CSS 的 @lg） 以上時，文字大小改為 40px = 2.5rem。

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;
  }
}

限定範圍

不只如此，在 Master CSS 你甚至可以限定範圍進行條件式應用！

<div class="text:center@sm&<lg"></div>
<div class="text:center@<sm"></div>
<div class="text:center@<=sm"></div>
<div class="text:center@>xl"></div>
<div class="text:center@>=xl"></div>

@media (min-width: 768px) and (max-width: 1279.98px) {
  .text\:center\@sm\&\<lg {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .text\:center\@\<sm {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .text\:center\@\<\=sm {
    text-align: center;
  }
}

@media (min-width: 1440.02px) {
  .text\:center\@\>xl {
    text-align: center;
  }
}

@media (min-width: 1440px) {
  .text\:center\@\>\=xl {
    text-align: center;
  }
}

任意值

假如有一個很特別的斷點（例如 789px）需要使用，而 Master CSS 又沒有提供這個預設斷點的話，我們也能直接在 @ 後面寫上特定數值。

<h1 class="font:32@>789">...</h1>
<h1 class="font:32@>=789">...</h1>

注意：> 符號不包含 789px 本身，若要包含的話需要使用 >= 符號。

@media (min-width: 789.02px) {
  .font\:32\@\>789 {
    font-size: 2rem;
  }
}

@media (min-width: 789px) {
  .font\:32\@\>\=789 {
    font-size: 2rem;
  }
}

總結

本日 codepen 連結

響應式設計已經是目前網頁開發必備的技術，Master CSS 提供的預設斷點已經能符合大部分的使用者裝置，但假如還是有某些地方需要比較特別的斷點，也能透過 Master CSS 的任意值來使用。

參考

• Master CSS 官網 - 響應斷點