为什么宽度在我的媒体查询中没有生效？

Question

我以前从未 运行 解决过这个问题，但由于某种原因，我无法修改媒体查询中的宽度。在开发人员工具中，宽度显示为被划掉，就像我将其切换为不显示一样，但事实并非如此，它默认显示。

我很想改变这个：

div.wrapper{
    display:block;
    width:100%;
}

进入这个：

.wrapper {
    width: 95%;
    margin: 0 2.5%;
}

我什至尝试将我的媒体查询 wrapper class 更改为 div.wrapper...但它没有帮助，

这是什么原因造成的？

Answer 1

在您的媒体查询中，使用与之前相同的定义：

div.wrapper {
    width: 95%;
}

Answer 2

在css中，如果我们调用像attribute.classname(div.wrapper)这样的元素，它将比调用.classname(.wrapper).

有更高的优先级

现在你有两种方法可以解决这个问题。

1. 更改调用方式（在main-css和media-query中使用相同的调用方式）

2. 否则在 .wrapper 中的宽度后给出一个额外的 属性 '!important'。

   .包装器{ 宽度：95%！重要； 保证金：0 2.5%； }

Answer 3

我认为你应该阅读这篇文章： CSS: Understanding the selector's priority / specificity

使用CSS规则时有优先权。

例如，.column .sponsors 将优先于 .sponsors

Answer 4

关于您的 .column .sponsors 问题，您也应该这样做：

@media screen and (max-width: 640px)
{
    .column .sponsors {
        width: 90%;
    }
}

这不会修改 .column 声明。