預設斷點

在「Day 11 - 在元素上應用響應式斷點」這個單元裡，有介紹到 Master CSS 響應式斷點的使用方法，並且官方有提供多達十組的預設斷點。

儘管如此，有些開發者習慣的斷點名稱可能與 Master CSS 預設的不一樣，又或者是已經習慣了其他框架設計好的斷點，比如 Bootstrap 跟 Tailwind CSS 的斷點 md 代表的是寬度 768px，而 Master CSS 的斷點 md 卻是代表寬度 1024px，這個時候我們就可以自定義響應式斷點。

覆寫斷點

試著以 Tailwind CSS 的斷點來覆寫 Master CSS 的預設斷點。

將 extend 裡的第一個參數設定為 breakpoints，代表要自定義的屬性是斷點，物件裡面的 key 對應的是斷點名稱，value 對應的是斷點寬度。

const Style = window.MasterStyle;

/* 自定義配置 */
Style.extend('breakpoints', {
  sm: '640px', // => @media (min-width: 640px) { ... }
  md: '768px', // => @media (min-width: 768px) { ... }
  lg: '1024px', // => @media (min-width: 1024px) { ... }
  xl: '1280px', // => @media (min-width: 1280px) { ... }
  '2xl': '1536px' // => @media (min-width: 1536px) { ... }
});

window.initMasterCSS();

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

編譯出來的 CSS 規則可以發現已經成功設定成 Tailwind CSS 的斷點寬度了。

.f\:20 {
  font-size: 1.25rem;
}

@media (min-width: 640px) {
  .f\:24\@sm {
    font-size: 1.5rem;
  }
}

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

@media (min-width: 1024px) {
  .f\:48\@lg {
    font-size: 3rem;
  }
}

自定義響應式斷點

假如開發者不習慣 sm、md、lg 等斷點命名，也能自定義斷點名稱。

const Style = window.MasterStyle;

/* 自定義配置 */
Style.extend('breakpoints', {
  tablet: '768px', // => @media (min-width: 768px) { ... }
  laptop: '1024px', // => @media (min-width: 1024px) { ... }
  desktop: '1280px', // => @media (min-width: 1280px) { ... }
});

window.initMasterCSS();

<h1 class="f:20 f:24@tablet f:32@laptop f:48@desktop">Hello World!</h1>

.f\:20 {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .f\:24\@tablet {
    font-size: 1.5rem;
  }
}

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

@media (min-width: 1280px) {
  .f\:48\@desktop {
    font-size: 3rem;
  }
}

總結

本日 codepen 連結

有些開發者習慣的斷點名稱可能與 Master CSS 預設的不一樣，又或者是已經習慣了其他框架設計好的斷點，這個時候就可以自定義響應式斷點來符合自己的需求。

參考

• Master CSS 官網 - 響應式斷點
• Master CSS 官網 - 自訂