可以避免带有多个媒体查询的CSS代码冗余吗？
可以避免带有多个媒体查询的CSS代码冗余吗？
提问于 2021-12-09 11:05:22
我有一张有特定尺寸的照片：
.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覆盖。
有没有避免代码冗余的方法？
非常感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-09 11:11:31
可以为响应规则指定媒体screen：
.image-size {
height: 400px
}
@media screen and (max-width: 991px) {
.image-size {
height: 280px
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70288796
复制相关文章
相似问题
腾讯云开发者
