@media screen and (min-width: 1280px){ 即使我的分辨率是 1920*1080 也不起作用

Question

1920 * 1080 不顯示導航菜單項

我為除 >1280 之外的所有設備寬度設置 display = none

 `@media only screen and (min-width: 100px) and (max-width: 260px) {

  header .navigation {
  display: none;
  }

  @media only screen and (min-width: 260px) and (max-width: 350px) {

  header .navigation {
  display: none;
  }



 @media only screen and (min-width: 370px) and (max-width: 500px) {
  header .navigation {
 display: none;
}


@media only screen and (min-width: 500px) and (max-width: 1280px) {
header .navigation {
display: none;
}

@media only screen and (min-width: 350px) and (max-width: 370px) {

header .navigation {
display: none;
}

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

header .navigation{

height:3em;
position: relative;
background:  dark orange ;
width:98em;
top:50;
left:-12em;
font-size:30px;
font-color: dark orange;
font-family: Meow Script;
padding:20px;
}


header .navigation .navigation-items a{

 font-family: Meow Script;
  position: relative;
  background: dark red;
  color: white;
  font-size: 3em;
  font-weight: 500;
  width:100px;
  font-size:20px;
  text-decoration: none;
  margin-left: 15px;
  transition: 0.3s ease;
  left :15em;
  padding: 15px 40px;
  border-radius:150px;
  font-family: Meow Script;
  }

  header .navigation .navigation-items a span{
  border-radius:50px;
  width:100px;
  font-family: Meow Script;
  font-size: 1.2em;
  }

  header .navigation .navigation-items a:before{
   content: '';
   position: absolute; 
   font-family: Meow Script;
   width: 0;
   height: 3px;
   bottom: 0;
   left: 0;
   transition: 0.3s ease;
  }

  header .navigation .navigation-items a:hover:before{
  width: 100%;
  }
  }`

  if I use the same in a different CSS file without media queries I am able to see the navigation menus in my Laptop 1920*  1080 resolution.

在沒有媒體查詢的情況下使用 CSS 時顯示的導航菜單。 當 CSS 與 1920*1080 筆記本電腦的媒體查詢一起使用時，導航菜單不顯示

我嘗試編寫媒體查詢，使導航菜單僅顯示 >1280 像素的寬度，而不顯示較小的屏幕寬度，如移動設備和筆記本電腦。

我為所有設備寬度 <1280px 設置了 display = none。

但是導航菜單不顯示 1920*1080 為

很好（>1280px 寬度）

Answer 1

您only在最后一個mediaQuery上缺少一個。

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

應該

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

Answer 2

開始修復您的 CSS 中的一些錯誤，如果您不知道如何修復，請嘗試使用在線驗證器，如下所示：

https://jigsaw.w3.org/css-validator/#validate_by_input

也許問題不在媒體查詢上，而在其他規則生成的 output 上。

關於媒體查詢的提示：將所有 CSS 放在媒體查詢之外，僅使用它們來更改所需的功能。 注意媒體查詢的順序，有時一條語句會覆蓋之前的語句。

試試這個 CSS：

header .navigation {
    display: none;
}
header .navigation {
    height: 3em;
    position: relative;
    background: darkorange;
    width: 98em;
    /* top:50;*/ /* this make the object disappear */
    /* left:-12em;*/ /* this make youtr object disappear */
    font-size: 30px;
    color: #000;
    font-family: Meow Script;
    padding: 20px;
}
header .navigation .navigation-items a {
    font-family: Meow Script;
    position: relative;
    background: darkred;
    color: white;
    font-size: 3em;
    font-weight: 500;
    width: 100px;
    font-size: 20px;
    text-decoration: none;
    margin-left: 15px;
    transition: 0.3s ease;
    left : 15em;
    padding: 15px 40px;
    border-radius: 150px;
    font-family: Meow Script;
}
header .navigation .navigation-items a span {
    border-radius: 50px;
    width: 100px;
    font-family: Meow Script;
    font-size: 1.2em;
}
header .navigation .navigation-items a:before {
    content: '';
    position: absolute;
    font-family: Meow Script;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
}
header .navigation .navigation-items a:hover:before {
    width: 100%;
}
@media screen and (min-width: 1280px) {
header .navigation {
    display: block;
}
}

工作代碼筆： https://codepen.io/Davevvave/pen/poZrwZE