css 名称为 class 的媒体查询

Question

下面的 html 有一张图片，根据我的@media 查询大小不同。它在没有任何 class 名称的情况下工作正常，但是一旦我添加 class 名称（使用 Angular ngClass directive），媒体规则就不再触发。

工作正常 - 应用了媒体规则，图像为 105x105，其中高度 >= 999px。

div {
    width: 85px;
    height: 85px;
    align-self: center;
    
    @media screen and (min-height: 999px) {
      width: 105px;
      height: 105px;
    }
}

     <div>
      <img
        *ngIf="svgImageData"
        src="{{ svgImageData }}"
        width="{{ width }}"
        height="{{ height }}"
      />
    </div>

而且当我检查元素时，我可以看到应用了 min-height: 999px：

使用 class 名称，媒体规则不会触发 - 即我评论了 105px 的高度和宽度，并将其移至 class媒体查询以下规则：

div {
    width: 85px;
    height: 85px;
    align-self: center;
    
    @media screen and (min-height: 999px) {
      //width: 105px;
      //height: 105px;
      .gcl-no-scrollbar {
        width: 105px !important;
        height: 105px !important;
      }      
      .gcl-scrollbar{
        width: 95px;
        height: 95px;
      }
    }
}

<div [ngClass]="gclScrollbarIsVisible ? 'gcl-scrollbar' : 'gcl-no-scrollbar'" >
      <img
        *ngIf="svgImageData"
        src="{{ svgImageData }}"
        width="{{ width }}"
        height="{{ height }}"
      />
    </div>

这里我看到 gcl-no-scrollbar 应用于 html 元素，但不是媒体查询规则 .gcl-scrollbar { ... }

Answer 1

我的问题是级联问题。问题很简单，我忘了添加 &.:

div {
width: 85px; 
height: 85px;
&.gcl-scrollbar{
  width: 95px;
  height: 95px;
}
align-self: center;

}

css 名称为 class 的媒体查询

css media query with class name

css

sass

media-queries