Question

我在media-query中遇到问题，它首先能很好地检测到我，但是当它们小于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

最后一个媒体查询仅在屏幕宽度等于或小于765px而不是768px时才起作用。还需要使用* /

关闭评论

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

Answer 2

您可以尝试以下操作： 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 个空格，请尝试仅使用一个空格，以避免出现任何可能的问题。

为什么？没有检测到媒体

2 个答案: