Question

这是我的CSS media 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代表层叠样式表，因此您必须将媒体查询放在标准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 2

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，然后指出＆＃34; button下的任何.container并且班级.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上设置样式将优先于样式表上的任何内容。

5 - 包含!important的元素（如果有更多!important个元素，则为具体内容）

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

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

!important的任何内容都是，更重要的是，所以CSS会理解这一点。但是，如果有更多!important规则，则其他规则将应用于重要元素中。

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

因此，在您的情况下，简单地将所有媒体查询放在＆＃34; normal＆＃34;之后。像这样的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 3

简单地说：媒体查询中的规则和＆＃34;正常＆＃34;规则适用于此，所以＆＃34;正常＆＃34;由于级联，正在应用规则。

您的屏幕尺寸小于450px，因此适用媒体查询规则。＆＃34;正常＆＃34;规则适用于任何条件。级联将确定＆＃34;赢家＆＃34;以样式表中后面出现的那些，因为它们都是同样具体的，这似乎是你的正常＆＃34;规则。

在您的情况下，您可以颠倒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; 
}

MEDIA CSS

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

希望这可以解决您的问题。

未应用媒体查询

5 个答案: