CSS网格，Angular 6未侦听媒体查询

在旧的Angular 6应用程序中添加CSS网格样式。我有一个没有触发的媒体查询，我想知道它是否与angular及其CSS规则的层次结构有关

问题：在750px下，媒体查询应该触发-更改网格布局。不起作用

使用开发工具，我已经在CSS网格上手动更改了repeat，它可以工作，但不管我做什么，甚至更改为！重要的是，媒体查询从不触发

CSS:

介质（最大宽度：750px）{
.包装纸{
宽度：100%；
显示：网格；
高度：自动；
网格模板列：1fr；首先，正如aleady在评论中提到的，您忘记了
媒体前面的
@

解决此问题后，您必须使用
！important
覆盖冲突的CSS规则

在您的
@媒体上
->
。事件框
->
网格模板列
是
而不是
；

要了解有关
！重要的
异常的更多信息，请查看


下面的CSS应该可以做到这一点：

@media(max-width:750px) {
  .wrapper {
    width: 100%;
    display: grid;
    height: auto;
    grid-template-columns: 1fr !important; // '!important' to overwrite
  }
  .event-box {
    grid-template-columns: repeat(1, 1fr); // changed '.' to ';' and '!important' to overwrite
  }
}

.wrapper {
  font-size: 13.5px;
  line-height: 1.2em;
  box-sizing: border-box;
  width: 100%;
  font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
  min-height: 1000px;
  height: auto;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 4fr;
  grid-auto-rows: minmax(50px, auto);
  text-align: center;
  background: #f9f3d8;
  box-shadow: 0 0 1.5em #867453;
}

.event-box {
  padding-top: 2%;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(25%, auto)
}

需要查看一些代码来帮助修复：-）您正在编写只有
网格模板列
不会启动的代码？其他CSS属性也会应用吗？也许您可以将代码复制到，以便我们可以更轻松地调试。我现在无法启动代码，但我确信这些类是正确的。您知道它是
@media（最大宽度：750px）{
，对吗？我进一步写了@media screen和（max width:750px）{}。当您重写这个时，请确保在同一元素的样式表下没有任何冲突的媒体查询。
@media(max-width:750px) {
  .wrapper {
    width: 100%;
    display: grid;
    height: auto;
    grid-template-columns: 1fr !important; // '!important' to overwrite
  }
  .event-box {
    grid-template-columns: repeat(1, 1fr); // changed '.' to ';' and '!important' to overwrite
  }
}

.wrapper {
  font-size: 13.5px;
  line-height: 1.2em;
  box-sizing: border-box;
  width: 100%;
  font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
  min-height: 1000px;
  height: auto;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 4fr;
  grid-auto-rows: minmax(50px, auto);
  text-align: center;
  background: #f9f3d8;
  box-shadow: 0 0 1.5em #867453;
}

.event-box {
  padding-top: 2%;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(25%, auto)
}