媒体查询问题

Question

我正在学习 HTML 和 CSS 。我创建了一个网站，我需要在一件事上放一个媒体查询，但它不起作用：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

以下是我的网站：http://rickandmorty.8u.cz/index.html

Answer 1

由于您在img 元素中的内联样式，它覆盖了所有内部/ <外部样式您已为同一元素定义。 内联样式具有最高优先级，然后内部和外部最少。因此，为了解决问题，只需将您的内联样式移到@media上方：

＆＃13;

＆＃13;

#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;
 }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;