html - 媒体查询问题

Question

我正在学习 HTML 和 CSS。我创建了一个站点，我需要对一件事进行媒体查询，但它不起作用:

@media screen and (max-width: 1100px) {
  #boxmb {
    position: fixed;
    left: 60%;
    padding-top: 1%;
    z-index: 999;
  }
}

<a class="boxmb" href="#section2"><img class="boxmb" id="boxmb" id="togglee" style="position: fixed; left: 90%; padding-top: 10%" src="https://placehold.it/100x100" alt="" id="image1" onclick="showButton();diffImage(this);showSurpriseImage();PlaySound();" ></a>

这是我的网站:http://rickandmorty.8u.cz/index.html

Answer 1

它不起作用，因为 inline 样式 你在 img element 中有覆盖你所有的内部/外部您为同一元素定义的样式。 内联样式 具有最高优先级，其次是内部 和外部。所以，为了解决这个问题，只需将你的内联样式移到@media之上:

#boxmb {
  position: fixed;
  left: 90%;
  padding-top: 10%;
}

@media screen and (max-width: 1100px) {
 #boxmb {
   position: fixed;
   left: 60%;
   padding-top: 1%;
   z-index: 999;
 }
}

<a class="boxmb" href="#section2">
  <img class="boxmb" id="boxmb" src="https://placehold.it/100x100" alt="" onclick="showButton();diffImage(this);showSurpriseImage();PlaySound();">
</a>