html如何断点检查,常见CSS媒体查询断点

我正在使用4个断点，但正如ralph.m所说，每个站点都是唯一的。你应该尝试一下。由于设备，屏幕和分辨率众多，因此没有神奇的断点。

这是我用作模板的内容。我正在检查网站上不同移动设备上的每个断点，并为每个元素(ul，div等)更新CSS，但该断点无法正确显示。

到目前为止，我正在制作多个响应式网站。

/* SMARTPHONES PORTRAIT */

@media only screen and (min-width: 300px) {

}

/* SMARTPHONES LANDSCAPE */

@media only screen and (min-width: 480px) {

}

/* TABLETS PORTRAIT */

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

}

/* TABLET LANDSCAPE / DESKTOP */

@media only screen and (min-width: 1024px) {

}

更新

截至2015年9月，我正在使用更好的产品。我发现这些媒体查询断点与更多设备和桌面屏幕分辨率匹配。

将所有用于桌面的CSS放在style.css上

响应.css上的所有媒体查询：响应菜单的所有CSS +媒体断点

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

更新2019：根据下面的雨果评论，由于新的非常宽的屏幕，我删除了最大宽度1999px。