CSS Class 内部媒体查询不适用

Question

我目前正在尝试通过媒体查询使网站更具响应性。但是，出于某种原因，我无法让我的类完全应用于我的媒体查询（或者至少，看起来是这样？）。

我不确定我是否做错了什么，忽略了什么，或者这只是我应该休息一下的信号。无论哪种方式，CSS 看起来如下：

@media (max-width: 760px) {
    font-size: 56px;

    :not(.aboutUs_extra_margin) {
      margin-top: 190px !important;
    }
}

Answer 1

我认为您遗漏了一个 class，它应该用于包装样式。样式将应用于您环绕样式的 class。您的代码应该如下所示：

@media (max-width: 760px) {
    .className{
        font-size: 56px;
    }

    :not(.aboutUs_extra_margin) {
         margin-top: 190px !important;
    }
}

如果您希望所有 classes 应用此样式，您可以改为添加正文。 Body 是所有 classes.

的父元素

@media (max-width: 760px) {
    body{
        font-size: 56px;
    }   
    :not(.aboutUs_extra_margin) {
         margin-top: 190px !important;
    }
}

更新：

根据下面的评论，我制作了一个包含媒体查询的 fiddle。一个在父元素内，一个在父元素外。

https://jsfiddle.net/rhbsqj6z/4/

唯一适用的样式来自此代码：

@media (max-width: 760px) {
    body{
        background:green;
    }   
    :not(.aboutUs_extra_margin) {
         border:1px solid red;
    }
}

虽然您希望它下面的样式适用，但因为 CSS 查看最后定义的样式。另外，如果您要注释掉第一个媒体查询，您会发现下面的仍然不起作用：

.parent{
@media (max-width: 760px) {
    body{
        background:red;
    }   
    :not(.aboutUs_extra_margin) {
       border:1px solid blue;
    }
}

父 class 中的媒体查询不工作。

CSS Class 内部媒体查询不适用

CSS Class inside media query not applying

css

responsive-design