LocalTools離線瀏覽器工具合集

分類: 開發工具

響應式斷點速查表

站方自行規劃沒找到想要的工具？

對比框架斷點，或產生自訂媒體查詢

對比 Tailwind、Bootstrap、Bulma 和 Material Design 的預設 min-width 斷點，複製任意斷點的媒體查詢，或輸入自訂斷點產生 CSS。

sm640px
md768px
lg1024px
xl1280px
2xl1536px
@media (min-width: 640px) {
  /* sm */
}

@media (min-width: 768px) {
  /* md */
}

@media (min-width: 1024px) {
  /* lg */
}

@media (min-width: 1280px) {
  /* xl */
}

@media (min-width: 1536px) {
  /* 2xl */
}

sm480px
md768px
lg1100px
xl1440px
@media (min-width: 480px) {
  /* sm */
}

@media (min-width: 768px) {
  /* md */
}

@media (min-width: 1100px) {
  /* lg */
}

@media (min-width: 1440px) {
  /* xl */
}

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

不同 CSS 框架會使用不同的斷點名稱與像素寬度，在多個專案之間切換時很容易記混。這個工具把四個常見框架的預設斷點並排列出，並可把它們或你輸入的自訂斷點轉換成可直接貼上的 @media (min-width: ...) 程式碼區塊。

使用方式

  1. 選擇一個框架，查看預設斷點和媒體查詢。
  2. 複製你需要的 CSS。
  3. 或輸入自己的斷點名稱和寬度來產生自訂查詢。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

為什麼使用 min-width 而不是 max-width？
行動優先的 min-width 寫法讓基礎樣式面向小螢幕，再在更大斷點逐步增強，和多數框架的預設方式一致。
這些數值和框架預設值一致嗎？
是的，這裡列的是各框架文件中的預設斷點。如果你的專案自訂了設定，請使用自訂斷點產生器輸入自己的數值。
自訂斷點怎麼寫？
每行一個斷點，名稱和像素寬度用逗號或空格分隔，例如 "md, 768"。

回到全部工具