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英寸，菜单链接之间的间隙不相同而且会发生变化。

以下是链接：mayabarber.co.il

我无法附加HTML，因为它是使用实时构建器创建的，而我没有编写它。

由于媒体查询与屏幕分辨率有关，当涉及具有不同样式的相同分辨率屏幕时，我该怎么办？如何在1920宽度屏幕上使其看起来很好，在15“和21”+。

谢谢！

Answer 1

尝试指定一般屏幕尺寸范围，然后区分视网膜和非视网膜屏幕。例如，

/* ----------- 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

在头标记

中添加此内容

withCredentials([sshUserPrivateKey(credentialsId: <credentials_name>, keyFileVariable: 'SSHKEYFILE')]) {
    sh("ssh-agent bash -c 'ssh-add ${env.SSHKEYFILE}; git clone <url>'") // replace 'sh' with 'bat' if using windows
}

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

2 个答案: