Can CSS code redundancy with multiple media queries be avoided?-CodePudding

I have a picture with a specific size:

.image-size {
    height: 400px
}

For smaller screens, I decrease this size:

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

But when the page is printed, I need the original size:

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

I tried to avoid the code redundancy with

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

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

but that did not work with small screens because the print size 400 was overwritten with the small screen size 280.

Is there a way to avoid the code redundancy?

Many thanks!

CodePudding user response：

You can specify the media screen for responsive rules:


.image-size {
   height: 400px
}

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