Question

所以我有一个试图使之响应的子主题，但是其中一个媒体查询根本不适用-一旦屏幕变小，该设置将.single-column的背景更改为橙色大于700px。其他两个媒体查询工作完美。有谁对为什么这个媒体查询不起作用以及如何解决这个问题有任何想法？

这是一个子主题，父主题具有针对以下屏幕尺寸的媒体查询：2500px，1300px，1100px，1000px。这些都没有被我的代码覆盖，但是我很好奇这是否与我的问题有关，因为我遇到麻烦的屏幕尺寸不在父主题的媒体查询集中。 / p>

 /* 1100px */
 @media screen and (max-width: 1100px) {
    .mostrecent > ul {
      background-color: blue;
    }
 }

 /* 1000px */
 @media only screen and (max-width: 1000px) {
    .single_column {
      display: flex;
      flex-direction: column;
 }

 .right_column70 {
    order: 1;
    width: 100%;
 }

 .left_column30 {
    order: 2;
    display: flex;
    width: 100%;
 }

 .mostrecent > ul {
    display: flex;
 }
}

/* 700px 
This one doesn't work */
@media only screen and (max-width: 700px) {
    .single_column {
     background-color: red;
 }
}

Answer 1

大多数情况下，.single_column在主主题样式表中都有一个CSS规则，该规则使用具有更高 CSS特殊性的选择器（您可以通过Google搜索以获取更多信息）。在这种情况下，媒体查询规则由于其较低的特异性而不会覆盖它。

您应该使用浏览器工具检查.single_column元素是否适用于哪个CSS规则。

例如，如果该规则具有一个类似main .container-1 div.wrapper > products .single_column的选择器，那么您需要在该媒体查询中为您自己的CSS规则使用相同的选择器（或更具体/更复杂的选择器）。

仅应用了一个媒体查询

1 个答案: