＃什麼是適用於響應式設計的好的 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。
這些是我從現在開始要使用的媒體查詢：
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}