如何在@media查询CSS

Question

我在@media内设置了宽度，但是不起作用！请遵循代码：

mat-toolbar {
    app-toolbar-left {
        width: 35%;
    }

    app-toolbar-right {
        width: 22%;
    }
}

@media (min-width: 1024px) {
    app-toolbar-left {
        width: 25%;
    }

    app-toolbar-right {
        width: 17%;
        margin-right: 1.5%;
    }
}

我怀疑CSS margin-right是否有效，为什么width不起作用？只是出现在google dev工具中，但是有痕迹...有一些规则我忘记了或者我不知道吗？如果我设置！important在工作，但我知道这不是一个好习惯。 有人帮忙吗？非常感谢！ 这是如此简单，但是我做不到！ =）

Answer 1

尝试这样：

@media (min-width: 1024px) {
    mat-toolbar {
        app-toolbar-left {
            width: 25%;
        }

        app-toolbar-right {
            width: 17%;
            margin-right: 1.5%;
        }
    }
}

我认为问题仅在于媒体查询中的选择器不够详细。

Answer 2

如果这些是CSS类（您什么都没提及），则需要在类名之前使用点号，例如

.app-toolbar-left { 
  ... 
}
.app-toolbar-right  {
  ...
}  

等

媒体查询本身编写正确，但是如果这些是CSS类（而不是某些框架），则样式表中的类需要这些点。