css媒体查询正确的大小

我正在开发一个使用媒体查询的网站。我使用的是这些：

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

我遇到的问题是，笔记本电脑中的某些屏幕分辨率使屏幕看起来像这样：

如你所见。导航部分与主徽标和字母重叠，底部覆盖主导航菜单。这种情况基本上发生在笔记本电脑屏幕上，屏幕的宽度和高度都非常大。是否有任何方法可以通过媒体查询来确定此解决方案的目标

你有这个：

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

除此之外，您还可以执行以下操作：

@media screen and (min-width: 800px) and (max-width: 900px) {

只需将需要定位的元素放入媒体查询中即可。您可以进行任意数量的媒体查询，并且只针对需要的元素

---

现在可能已经太晚了，但我建议以后只在大多数媒体查询中使用

min width

，这样您就不会复制一些相同的代码了。

如果使用百分比而不是像素，则更容易防止此类问题！您是否注意到在1024px和1199px之间存在MQ重叠？第二和第三个MQ都适用：这不一定是坏事或错误，这取决于第二和第三个MQ中的CSS规则：）如果您不确定这些笔记本上的解决方案，您可以通过