显示1个div，隐藏2个其他...媒体查询无效

Question

我没有一次显示1个div，而是看到最宽的所有3个div，并且当我缩小页面时它们正在消失。我无法弄清楚为什么......

<style>
@media screen and (min-width: 1280px) and (max-width: 1400px){
#W1400px { display: block;}  
#W1280px { display: none;}  
#W1024px { display: none;}
}

@media screen and (min-width: 1024px) and (max-width: 1280px){
#W1400px { display: none;}   
#W1280px { display: block;}
#W1024px { display: none;}  
}

@media screen and (min-width: 0px) and (max-width: 1024px){
#W1400px { display: none;}  
#W1280px { display: none;}  
#W1024px { display: block;}
}
</style>

Answer 1

您需要从第一个媒体查询中删除and (max-width: 1400px)。

目前此块仅适用于视口小于1400px的情况。如果视口宽于1400px，则将显示所有三个div。

(min-width: 0px)也是不必要的，可以删除。

@media screen and (min-width: 1280px) {
  #W1400px {
    display: block;
  }
  #W1280px {
    display: none;
  }
  #W1024px {
    display: none;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  #W1400px {
    display: none;
  }
  #W1280px {
    display: block;
  }
  #W1024px {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  #W1400px {
    display: none;
  }
  #W1280px {
    display: none;
  }
  #W1024px {
    display: block;
  }
}

<div id="W1400px">
  W1400px
</div>
<div id="W1280px">
  W1280px
</div>
<div id="W1024px">
  W1024px
</div>

Answer 2

试试这个，记住，css是区分大小写的

@media  (min-width: 1281px){
#w1400px { display: block;}  
#w1280px { display: none;}  
#w1024px { display: none;}
}

@media  (min-width: 1025px){
#w1400px { display: none;}   
#w1280px { display: block;}
#w1024px { display: none;}  
}

@media (max-width: 1024px){
#w1400px { display: none;}  
#w1280px { display: none;}  
#w1024px { display: block;}
}