响应式设计的良好CSS断点值是多少？

我在项目中使用的最佳CSS断点值

在设计站点时，我注意到我为CSS断点使用了一些非常随机的值。有时会四舍五入，例如800或1200，有时是直到像素的特定值，例如672。

我搜索了适用于以后的断点的适当值。

我花了一点时间查一下，得出了这个结论。

我们有5种主要的设备尺寸需要担心：

这些设备映射到这些像素值：

我从尾风默认。

我不是设计师，因此我每天都不会参与最佳实践，但是我决定这次是首先设计移动设备。

这意味着我的CSS（无需任何媒体查询）将针对移动肖像用例进行设计，然后添加我将为越来越大的设备设计的断点，从而禁止max-width来自媒体查询。

我想我总是走相反的路线：设计更大的屏幕（这是我最常使用的屏幕），然后再缩小屏幕，但首先设计移动设备并使用min-width似乎是当今最被接受和使用的解决方案。

这些是我从现在开始将使用的媒体查询：

@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}

免费下载我的CSS手册