我认为有两种流行的方法可以解决这个问题：设备相关的断点和设计相关的断点。虽然我确实尝试从移动设备到大屏幕构建我的 CSS，但我没有预先定义断点。

无论如何，我从尽可能多的内在响应元素开始，利用块级元素的固有属性来尝试适应它们的容器，并在顶部使用 min-width 和 max-widths 和百分比（以及最近的视口单位）那。

只有这样我才会开始从小到大调整浏览器的大小，并且一旦我到达一个元素开始看起来不应该的点，我就会引入一个断点。如果它们之间的距离在 20 像素以内，我可能会将它们分组，但在那之后我会很高兴地创建一个新断点。

我从事的大多数项目都有 3-6 个断点，每个断点都有少量选择器。有时甚至在断点中只有一个选择器可以在一定宽度后调整该元素。我从不预先定义它们。

简而言之：我让设计决定断点，而不是设备。每个设计都是不同的。

为了进一步阅读，我推荐这篇博文。

就个人而言，当涉及到断点时，我首先开始移动（正如你一直应该做的那样），然后我使用以下内容：

@media all and (min-width: 321px) {
    // 321px and up
}

@media all and (min-width: 641px) {
    // 641px and up
}

@media all and (min-width: 769px) {
    // 769px and up
}

@media all and (min-width: 1025px) {
    // 1025px and up
}

@media all and (min-width: 1201px) {
    // 1201px and up
}

这些对于我设计的 99% 的网站来说绝对完美。显然，有时设计需要根据设备（portrait或landscape）的方向进行更改，此时我将在需要的地方添加它们。还有其他时候，由于设计看起来非常混乱，设备需要在比传统设备更大或更小的断点处进行更改。在某些情况下，它归结为您正在处理的特定站点。

希望这个对你有帮助！