未应用媒体查询

Question

这是我的CSSmedia query

@media screen and (max-width: 450px) {
    .box_url {
        font-size: 12pt;
    }
    .box_heading {
        font-size: 13pt;
    }
    .right {
    text-align: left;
    }
    .jane {
    font-size: 10pt;
    }
    .ninja {
    font-size: 12pt;
    }
}

和我的正常 CSS

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
    font-size: 25pt;
}

但是当我运行网站时，一些媒体查询没有被应用。

当我在 chrome 中打开开发工具时，它显示媒体查询正在被覆盖。

我也尝试过使用 min-width，但它仍然不应用这些样式。为什么会发生这种情况以及如何解决这个问题？

Answer 1

CSS的重要性顺序如下：

1 - 单一声明

body {
    background: red;
}

2 - 第一个下面的任何声明

body {
    background-color: red;
}

body {
    background-color: blue; /* (This will be applied) */
}

/* I'm overwriting my background, so it should be blue now */

页眉上的位置也会产生影响。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

我的 style.css 在这个例子中，你覆盖了 bootstripe 文件上的任何内容，但请参阅下一个主题以了解例外情况

3 - 更具体的声明

.container button.awesome-button {
    font-size: 14px; /* (This will be applied) */
}

.awesome-button{
    font-size: 10px;
}

由于第一个声明非常具体，因此将考虑第一个声明。这就像告诉'嘿，任何 .awesome-button 应该是 10px，然后指出“.container 下的任何 button 并且 class .awesome-button 应该是 14px . 所以你的 CSS 应该尊重最具体和精确的坐标。

4 - CSS 作为属性

<style>
  .blue{
    color:blue;
  }
</style>

<div class="blue" style="color: red">The color of this div will be red, no matter the class</div>

直接在 HTML 上设置样式将优先于 sheet 上的任何样式。

5 - 具有 !important 的元素（如果有更多 !important 元素，则为特定内容）

.awesome-button {
    font-size: 14px !important; /* (This will be applied) */
}

.awesome-button{
    font-size: 10px;
}

任何带有 !important 的东西，嗯……更重要，所以你 CSS 会明白这一点。但是，如果有更多 !important 条规则，则将在重要元素内应用其他规则。

注意： 应谨慎使用 !important，并在某些情况下作为最后的资源。

因此，在您的情况下，简单地将所有媒体查询放在 "normal" css 之后，如下所示：

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

Answer 2

CSS 代表级联样式表，因此您必须将媒体查询放在标准 CSS

之后

像这样：

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

或者，如果您想将媒体查询放在第一位，那么您需要在 CSS 选择器中更加具体。

像这样：

@media screen and (max-width: 450px) {
  .flex .box_url {
    font-size: 12pt;
  }
  .flex .box_heading {
    font-size: 13pt;
  }
  .flex .right {
    text-align: left;
  }
  .flex .jane {
    font-size: 10pt;
  }
  .flex .ninja {
    font-size: 12pt;
  }
}
.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}

Answer 3

简单的说：media query里面的规则和"normal"规则都应用在这里，所以"normal"规则是因为级联而应用的。

您的屏幕尺寸小于 450px，因此媒体查询规则适用。 "normal" 规则适用于任何情况。级联将根据样式表中稍后出现的那个来确定 "winner"，因为它们都同样具体，这似乎是您的 "normal" 规则。

在您的案例中，您可以颠倒 CSS 中规则的顺序，或者您可以颠倒逻辑，使您的移动案例成为默认视图（移动优先！）并使用类似 min-width 媒体查询来改变你的文本在大屏幕上的表现。

Answer 4

例如：

@media (max-width: 450px){
    .box_url {
    font-size: 12pt;
    }
    .box_heading {
    font-size: 13pt;
    }
    .right {
    text-align: left;
    }
    .jane {
    font-size: 10pt;
    }
    .ninja {
    font-size: 12pt;
    }
}

希望对你有用。

Answer 5

使您的媒体查询声明遵循与原始 css 声明相同的顺序。例如，为了让我的媒体 css 正常工作，我会写

HTML

<div id="box-A"> 
    <div id="box-B"></div> 
</div>

CSS

#box-A #box-B {
    height:  100px; 
}

媒体 CSS

@media screen and (max-width: 480px) {
    /*This won't work*/
    #box-B {
        height:  50px;
    }
    /*This will work*/
    #box-A #box-B {
        height:  50px; 
    }
}

希望这能解决您的问题。

未应用媒体查询

Media queries are not being applied

html

css

media-queries

responsive-design