1

我主要使用 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，因为它是使用实时构建器创建的，而我没有编写它。

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

谢谢！

4

2 回答 2

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) { 
 }
于 2018-06-19T09:35:17.910 回答
0

将此添加到您的头部标签中

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
于 2018-06-19T09:35:33.093 回答