我正在尝试使我的材料列表文本在屏幕尺寸较小时缩小。我尝试创建一个无用的自定义CSS类，文本不会改变，所以我只是想像这样修改mat-list类：
@media (max-width: 1026px) {
.mat-list {
font-size: 10px;
}
}
@media (min-width: 1026px) {
.mat-list {
font-size: 60px;
}
}
但是文字大小仍然没有改变。
CSS媒体查询清单
•
问答
yuduotianguang 回答：CSS媒体查询清单
您必须在全局styles.css样式表中执行此操作。
尝试
::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方法
也许以下一项可以帮助您：
- 尝试将自定义样式表链接为最后一个CSS样式表
- 将媒体查询放在CSS文件的末尾
这样，您可以确保覆盖所有现有的CSS。