媒体查询仅部分工作

Question

基本上我在玩这些，我注意到一些属性确实会根据我的需要进行更改。有些（文本转换和字体大小）没有效果（它们在媒体查询之外工作但不在媒体查询中）。 p 和 #icon 部分工作完美，.title 的颜色和字体系列也是如此，所以我对为什么会发生这种情况一无所知。

相关代码片段：

@media only screen and (max-width: 1000px) {
    p {
        background-color: blue;
    }

    #icon {
        display: none;
    }

    .title {
        color: red;
        text-transform: lowercase;
        font-family: Arial;
        font-size: 10px;
    }

}

对于常规屏幕尺寸，我有

.title {
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 300;
}

并且在HTML部分

<h1 class="title" style="text-align: right; margin-bottom: 0px;">Jane Doette</h1>

Answer 1

对于选择器同样具体的规则，最后一个优先。

使媒体查询中的规则更具体，例如将 .title 更改为 h1.title，或将常规屏幕尺寸的规则放在媒体查询之前。

Answer 2

我的猜测是您的媒体查询放在非媒体查询样式之前。如果是这样，请将您的媒体查询放在：JS Fiddle - Media Query Last

之后

.title {
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 300;
}
@media only screen and (max-width: 500px) {
    p {
        background-color: blue;
    }
    #icon {
        display: none;
    }
    .title {
        color: red;
        text-transform: lowercase;
        font-family: Arial;
        font-size: 10px;
    }
}

否则，如果媒体查询是第一个，样式 sheet 中的最后一个样式将优先：JS Fiddle - Media Query First

媒体查询仅部分工作

Media queries working only partially

css

media-queries