为什么？没有检测到媒体

Question

我有媒体查询的问题，它第一次检测到我很好但是当它们小于768px时它不再检测到平均值

这是我的媒体查询。

@media  screen and (max-width:1920px){
#log {
bottom: 36%;
left: 35%;
  }
 }

@media screen and (max-width:1440px){
#log {

left: 41%;
width: 57%;
bottom: 30%;

}

#img2 {
width: 100%;
}
}
 @media screen and (max-width:1024px){
#log {
left: 61%;
width: 72%;
bottom: 30%;
 }
#img2 {
width: 100%;
  }
 }

  @media  screen and (max-width:765px){  /***** this is the one that does not work
#Table_01 {
margin-top: -12%;
 }
 }

Answer 1

你可以试试这个：jsfiddle Demo

#Table_01 {
  display: block;
  width: 100%;
  height: 500px;
  border: 1px solid black;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
   #Table_01 {
     margin-top: -12%;
   }
}

<table id="Table_01"></table>

注意：在某些@media问题中，您有2个空格，请尝试仅使用一个以避免任何可能的问题。

Answer 2

当屏幕宽度等于或低于765px而不是768px时，最后一个媒体查询才有效。还需要用* /关闭评论

@media screen and (max-width:768px) { /* this is the one that does not work */
    #Table_01 {
        margin-top: -12%;
    }
}