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。 這些是我從現在開始要使用的媒體查詢： @media (min-width: 640px) { } @media (min-width: 768px) { } @media (min-width: 1024px) { } @media (min-width: 1280px) { }