CSS @media 查询中断站点

Question

任何人都可以看到我在注释掉的媒体查询方面出了什么问题吗？

它们可以工作，但会破坏页面上的其他元素。站点上只有一个元素带有 class .btn-primary-mast-reapply


.btn-primary-mast-reapply {
    background-color: #FFB323;
    border-color:transparent;
    color:#0B4A74;
    font-weight: 700;
}

/*@media ( max-width: 991px ) {
  .btn-primary-mast-reapply {
    background-color: #0B4A74;
    color:#FFB323;
  }*/

.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
    background-color: #FFBC3E;
    border-color:transparent;
}

/*@media ( max-width: 991px ) {
  .btn-primary-mast-reapply:hover,
  .btn-primary-mast-reapply:focus,
  .btn-primary-mast-reapply:active,
  .btn-primary-mast-reapply.active,
  .btn-primary-mast-reapply.active.focus,
  .btn-primary-mast-reapply.active:focus,
  .btn-primary-mast-reapply.focus,
  .btn-primary-mast-reapply.focus:active,
  .btn-primary-mast-reapply:active:focus,
  .btn-primary-mast-reapply:focus {
    background-color: #155d8c;
    border-color:transparent;
    color: #FFB323;
  }
}*/

Answer 1

在第一个评论部分，您忘记使用 }

关闭范围

Answer 2

您在第一个@media 中缺少右括号

.btn-primary-mast-reapply {
  background-color: #FFB323;
  border-color: transparent;
  color: #0B4A74;
  font-weight: 700;
  width: 200px;
}

@media (max-width: 991px) {
  .btn-primary-mast-reapply {
    background-color: #0B4A74;
    color: #FFB323;
  }
} /* <------ this guy right here */

.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
  background-color: #FFBC3E;
  border-color: transparent;
}

@media (max-width: 991px) {
  .btn-primary-mast-reapply:hover,
  .btn-primary-mast-reapply:focus,
  .btn-primary-mast-reapply:active,
  .btn-primary-mast-reapply.active,
  .btn-primary-mast-reapply.active.focus,
  .btn-primary-mast-reapply.active:focus,
  .btn-primary-mast-reapply.focus,
  .btn-primary-mast-reapply.focus:active,
  .btn-primary-mast-reapply:active:focus,
  .btn-primary-mast-reapply:focus {
    background-color: #155d8c;
    border-color: transparent;
    color: #FFB323;
  }
}

<button class="btn-primary-mast-reapply">
Hi
</button>

Answer 3

我注意到您的第一个媒体查询没有右括号。

  ...
      @media ( max-width: 991px ) {
        .btn-primary-mast-reapply {
        background-color: #0B4A74;
        color:#FFB323;
      }
  } <-- this one

CSS @media 查询中断站点

CSS @media query breaking site

css

responsive-design