为什么 CSS 媒体查询看起来不同，即使屏幕具有相同的分辨率

Question

我主要使用 Elementor live builder 和一些 jQuery 和 CSS 创建了一个 Wordpress 网站。这是 CSS:

#menu-contact, #menu-solutions, #menu-about, #menu-regulation, #menuu { 
text-decoration: none; 
color: #0B1B70; 
justify-content: center;
display: inline-block;
min-width: 60px;
max-width: 235.97px;
white-space: nowrap;
position: relative;
width: 100%;
} 

.menu-item-text {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11px solid transparent; 
border-top: 2.11px solid transparent; 
}


#menuu:hover .menu-item-text, 
#menuu:focus .menu-item-text, 
#menuu:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}
#menu-contact:hover .menu-item-text, 
#menu-contact:focus .menu-item-text, 
#menu-contact:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-solutions:hover .menu-item-text, 
#menu-solutions:focus .menu-item-text, 
#menu-solutions:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-about:hover .menu-item-text, 
#menu-about:focus .menu-item-text, 
#menu-about:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#menu-regulation:hover .menu-item-text, 
#menu-regulation:focus .menu-item-text, 
#menu-regulation:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}


@media (min-width: 1280px) {
  #menu-contact {

    }
}
    @media (max-width: 1280px) {
  #menu-solutions {
    }
}
@media (max-width: 1280px) {
  #menu-regulation {
      left: 30px;
}
}

    @media (max-width: 1280px) {
  #menu-about {
      left: 88px;
    }
    }
       @media (max-width: 1280px) {
  #menuu {
          left: 40px

    }
       }

@media (max-width: 1279px) {
  #menu-contact {
      right: 66px;
    }
}
    @media (min-width: 769px) {
  #menu-solutions {
padding (0, 20px, 0, 0)
  }
@media (min-width: 769px) {
  #menu-regulation {
margin-left: 65px;
}
}

    @media (min-width: 769px) {
  #menu-about {
margin-left: 45px;
    }
    }
       @media (min-width: 769px) {
  #menuu {
right: ;       }

@media (min-width: 769px) {
  #menu-contact {
      right: 66px;
    }
}
    @media (min-width: 769px) {
  #menu-solutions {
padding: 0px 15px 0px 0px;
    }
}
@media (min-width: 769px) {
  #menu-regulation {
margin-left: 65px;
}
}

    @media (min-width: 769px) {
  #menu-about {
margin-left: 45px;
    }
    }
       @media (min-width: 769px) {
  #menuu {
margin-left: 0px;
    }
       }

              @media (min-width: 1680px) {
  #menu-contact {
margin-left: 42px;    }
}
    @media (min-width: 1680px) {
  #menu-solutions {
left: 14px;    }
}
@media (min-width: 1680px) {
  #menu-regulation {
right: 60px;}

}


    @media (min-width: 1680px) {
  #menu-about {
            left: 12px
      }
    }
       @media (min-width: 1680px) {
  #menuu {
padding: 0px 26px 0px 0px;
    }
       }

       @media (min-width: 1920px) {
  #menu-contact {
margin-left: 52px;    }
}
    @media (max-width: 1920px) {
  #menu-solutions {
left: 14px;    }
}
@media (max-width: 1920px) {
  #menu-regulation {
right: 78px;}

}


    @media (max-width: 1920px) {
  #menu-about {
padding: 0px  105px 0px 0px;
    }
    }
       @media (max-width: 1920px) {
  #menuu {
padding: 0px 15px 0px 0px;
    }
       }

我根据我拥有的几个桌面屏幕（1920、1680 和 1280 宽度）设置了顶部主菜单的样式。我需要使用填充、左、右和边距，因为我注意到有些属性并不总是有效。但主要问题是，当我检查笔记本电脑上的菜单时，它的宽度也为 1920 像素，但宽度是 15 英寸而不是 25 英寸，菜单之间的间距 link 不相等，它们会发生变化。

这是 link：mayabarber.co.il

我无法附加 HTML，因为它是使用实时生成器创建的，而不是我编写的。

既然媒体查询与屏幕分辨率有关，那么遇到同分辨率屏幕不同样式怎么办？我怎样才能让它在 1920 宽度的屏幕上看起来很好，无论是在 15" 还是 21"+。

谢谢！

Answer 1

尝试指定一个通用的屏幕尺寸范围，然后区分 Retina 和非 Retina 屏幕。例如，

/* ----------- Non-Retina Screens ----------- */
@media screen and (min-device-width: 1200px) 
              and (max-device-width: 1600px) 
              and (-webkit-min-device-pixel-ratio: 1) { 
 }

 /* ----------- Retina Screens ----------- */
 @media screen and (min-device-width: 1200px) 
               and (max-device-width: 1600px) 
               and (-webkit-min-device-pixel-ratio: 2)
               and (min-resolution: 192dpi) { 
 }

Answer 2

将此添加到您的 head 标签中

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

为什么 CSS 媒体查询看起来不同，即使屏幕具有相同的分辨率

Why CSS Media Queries look different even though screens have the same resolution

css

jquery

media-queries

elementor

responsive