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哪个是最推荐的？还是有另一种更有用的方法来做到这一点？

我想手动完成所有操作，引导程序是一个遥不可及的选择。

  

欢迎一些示例，建议和更正！

感谢您的关注。

Answer 1

我使用一个断点，基本上我只检测电话。至于整体布局，我使用的是功能最强大的CSS Grid。我发现维护几个断点是不现实的，因此我不再考虑平板电脑视图。它是电话视图还是电话视图。

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

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

}