HTML 完整的响应提示

Question

嗯，出于学习目的，我正在将响应能力应用到我的小项目中。

我看过一些网站，例如：w3schools-mediaquery

我发现了一些有趣的东西，但我想知道如何处理各种分辨率以及最推荐哪种媒体用于完全响应式网站。

我目前有类似的东西：

@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 1200px) {}

基本上是从一个简单的改编开始，没有太多的工作，我想从以下开始：

@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 650px) {}
@media only screen and (min-width: 700px) {}

编写接口 every 50px 有用吗？ 10 to 10, 20 to 20, 50 to 50 哪个最值得推荐？还是有另一种更有用的方法来做到这一点？

我想手动完成所有操作，bootstrap 是一个遥远的选择。

Some examples, recommendations, and corrections are welcome!

感谢您的关注。

Answer 1

我使用单个断点，基本上我只检测 phones。至于总体布局，我使用的是 CSS 网格，因为它是最有能力的。我发现维护几个断点是不现实的，所以我不再考虑平板电脑视图。它要么是 phone 视图，要么不是 phone 视图。

@media screen and (max-width: 767px) {

}
@media screen and (min-width: 768px) {

}