Question

假设我有这个：

.about_text {
  font-weight: 300;
  font-size: 1.125rem;
}

并且：

@media screen and (min-width: 64em) {
    .about_text {
        font-weight: 600;
        font-size: 1.500rem;
    }
}

如果我不使用！important它不会覆盖原来的CSS ......为什么会这样？我在Wordpress网站上使用LESS，但我已经完成了无数次，而这种情况从未发生过。我正在处理原始CSS之后的媒体查询。

Answer 1

如果您希望媒体查询使用css样式，请尝试使用Cascading进行媒体查询，如下所示：

   @media screen and (min-width: 64em) {
    div .about_text {
       font-weight: 600;
       font-size: 1.500rem;
       }
     }

Answer 2

您的代码本身看起来不错。可能存在其他相互冲突的问题，但如果没有，那么您很可能对媒体查询的触发点存在问题。

使用基于px的测量形式而不是em来进行媒体查询。 Em是相对的，而px是绝对的，产生更一致的结果。

＆＃13;

@media screen and (min-width: 480px) {
  .about_text {
  font-weight: 600;
  font-size: 1.500rem;
  }
}

＆＃13;

Answer 3

试试这个，

.about_text {
font-weight: 600;
font-size: 1.500rem;}

@media screen and (max-width: 64em) {
.about_text {
  font-weight: 300;
  font-size: 1.125rem;      
}

}

您的媒体查询不适用于移动设备，它仅适用于桌面或更大尺寸。

Mobile-First Media Queries不会覆盖原始CSS

3 个答案: