/

css-breakpoints

＃什麼是適用於響應式設計的好的 CSS 斷點值？

我在設計網站時注意到我在使用一些相當隨機的值作為我的 CSS 斷點。有時是像 800 或 1200 這樣的圓整值，有時是一個像 672 這樣具體的像素值。

我搜尋了適合我未來使用的斷點的正確值。

我有一點時間來查找這個，並得出了以下結論。

我們需要擔心的是 5 個主要的設備尺寸：

  • 行動裝置直向（mobile portrait）
  • 行動裝置橫向（mobile landscape）
  • 平板電腦直向（tablet portrait）
  • 平板電腦橫向（tablet landscape）
  • 筆記型電腦（laptop）

這些設備對應到以下像素值：

  • 行動裝置直向：小於 640px
  • 行動裝置橫向：> 640px
  • 平板電腦直向：> 768px
  • 平板電腦橫向：> 1024px
  • 筆記型電腦：> 1280px

我從Tailwind預設取得這些值。

我不是一位設計師，所以我並不每天涉獵最佳慣例，但這一次我決定以行動裝置為先設計。

這意味著我的 CSS，在沒有任何媒體查詢的情況下，將為行動裝置直向進行設計，然後在越來越大的設備上添加斷點，禁止在媒體查詢中使用 max-width。

我想我總是選擇相反的路線：先為較大的屏幕進行設計，這是我最常使用的方法，然後再縮小，但現在似乎最常接受和使用的解決方案是以行動裝置為先設計，並使用 min-width。

這些是我從現在開始要使用的媒體查詢：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}

tags: [“responsive design”, “CSS”, “breakpoints”, “media queries”]