用于mat-list的CSS媒体查询

Question

当屏幕尺寸变小时，我正在尝试让我的材料列表文本缩小。我尝试创建一个自定义css类，但没有用文本不会改变，所以我只是尝试修改mat-list类，如下所示：

@media (max-width: 1026px) {
  .mat-list {
    font-size: 10px;
  }
}

@media (min-width: 1026px) {
  .mat-list {
    font-size: 60px;
  }
}

但是文本大小仍然不变。

Answer 1

您必须在全局styles.css样式表中执行此操作。

Answer 2

试一试

::ng-deep {
   .mat-list {
      .mat-list-item {

        @media (max-width: 1026px) {
             font-size: 10px;
        }

        @media (min-width: 1026px) {
            font-size: 60px;
        }

      }

   }
}

注意:只能在ViewEncapsulation.Emulated模式下工作，在官方文档中被认为是不推荐使用的，但它仍然是一种临时解决方案。使用@JuNe推荐的style.scss方法

Answer 3

也许以下其中一种方法可以帮助您：

• 尝试链接您的自定义样式表作为最后的CSS stylesheet
• Place您的媒体查询在您的CSS文件末尾

这样可以确保覆盖任何现有的CSS。