Блог

Следующий html-код содержит изображение, размеры которого различаются в зависимости от моего запроса @media. Он отлично работает без каких-либо имен классов, но как только я добавляю имена классов (используя Angular ngClass directive ), правило мультимедиа больше не срабатывает.

1. Работает нормально — применяется правило мультимедиа, и изображение имеет размер 105×105, где высота> = 999 пикселей.

 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 применяется:

С именами классов правило мультимедиа не срабатывает, т. Е. Я прокомментировал высоту и ширину 105 пикселей и переместил их В правила класса ниже медиа-запроса:

 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 { ... }

Моя проблема была каскадной проблемой. Проблема была просто в том, что я забыл добавить amp;. :

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

}