不覆盖原始 CSS 的移动优先媒体查询答案

【问题标题】：Mobile-First Media Queries not overriding original CSS不覆盖原始 CSS 的移动优先媒体查询
【发布时间】：2017-03-31 07:09:12
【问题描述】：

假设我有这个：

.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 之后的媒体查询。

【问题讨论】：

你能提供一个实际不起作用的例子吗？

标签： css wordpress responsive-design less media-queries

【解决方案1】：

试试这个，

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

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

}

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

使用em 很好，实际上是使用媒体查询的更好方法。将其更改为 px 不会改变其工作方式。
只要基本字体没有设置为尴尬的东西，考虑到这一点，那么是的，em 的工作也一样。如果这不是问题，那么很可能还有另一个问题正在阻止媒体查询成为先例。

【解决方案3】：

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

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

【讨论】：

而且您使用的是最小宽度，因此它只能在屏幕为 64em(1024px) 或更大时生效。当我检查时，它正在将您的媒体查询样式应用于 1024 像素及更多。
这不会改变任何事情。你所做的只是创造更多的特异性。
也使用像素进行媒体查询，因为您永远无法确定 em 的像素值。
em 比使用px 更好，更灵活。将em 与相对字体大小相结合，当有人更改字体大小/缩放时，您的布局实际上会更好地工作。使用像素不会影响实际工作。