可以避免带有多个媒体查询的CSS代码冗余吗？

Question

我有一张有特定尺寸的照片：

.image-size {
    height: 400px
}

对于较小的屏幕，我减小了这个大小：

@media (max-width: 991px) {
    .image-size {
        height: 280px
    }
}

但是当页面被打印出来时，我需要原始大小：

@media print {
    .image-size {
        height: 400px
    }
}

我试图避免代码冗余

@media print, (max-width: 50000px)
    .image-size {
        height: 400px
}

@media (max-width: 991px) {
    .image-size {
        height: 280px
    }
}

但这并不适用于小屏幕，因为打印尺寸400被小屏幕大小280覆盖。

有没有避免代码冗余的方法？

非常感谢！

Answer 1

可以为响应规则指定媒体screen：

.image-size {
   height: 400px
}

@media screen and (max-width: 991px) {
    .image-size {
        height: 280px
    }
}