響應式設計的良好CSS斷點值是多少?

我在項目中使用的最佳CSS斷點值

在設計站點時,我注意到我為CSS斷點使用了一些非常隨機的值。有時四捨五入的值是800或1200,有時是直到像素的特定值,例如672。

我搜索了適用於以後的斷點的適當值。

我花了一點時間查一下,得出了這個結論。

我們有5種主要的設備尺寸需要擔心:

  • 手機人像
  • 移動景觀
  • 平板電腦肖像
  • 平板電腦風景
  • 筆記本電腦

這些設備映射到這些像素值:

  • 移動人像:小於640像素
  • 移動景觀:> 640px
  • 平板電腦肖像:> 768像素
  • 平板電腦橫向:> 1024px
  • 筆記本電腦:> 1280px

我從尾風默認

我不是設計師,因此我每天都不會參與最佳實踐,但是我決定這次是首先設計移動設備。

這意味著我的CSS(無需任何媒體查詢)將針對移動人像用例進行設計,然後添加我將為越來越大的設備設計的斷點,從而禁止max-width來自媒體查詢。

我想我總是走相反的路線:設計更大的屏幕(這是我最常使用的屏幕),然後再縮小屏幕,但首先設計移動設備並使用min-width似乎是當今最被接受和使用的解決方案。

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

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}

免費下載我的CSS手冊


更多CSS教程: