相关疑难解决方法(0)

默认CSS覆盖媒体查询

我从Chrome ADB插件中获取此信息,通过USB连接到我的手机.基本上允许我检查我的android chrome上的元素,并在我连接的PC上查看或更改它们.

我遇到了这个奇怪的问题.我认为媒体查询会否决泛型类规则,但如果您看到此图像,则可以看到媒体查询规则被覆盖.我可以通过添加来解决这个问题!important但我宁愿不这样做,我也意识到非媒体查询容器h1的规则是在媒体查询规则之后声明的.我不确定这是为什么,或者是否还有其他原因.任何人都可以解释为什么会这样吗?

在此输入图像描述

CSS代码:

@media screen and (max-device-width: 767px) {
  .container > h1 {
    font-size: 40px;
    line-height: 40px; }
    ...some more rules... }
.container > h1 {
    margin: 0;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px; }
Run Code Online (Sandbox Code Playgroud)

编辑 - 添加示例

请参阅:http ://jsfiddle.net/djuKS/ 请注意,如果您交换规则顺序,则行为符合预期.但默认情况下,媒体查询被覆盖

css css3 media-queries

22
推荐指数
1
解决办法
8995
查看次数

标签 统计

css ×1

css3 ×1

media-queries ×1