Prevent css media types from changing the print version

Question

Currently developing a website that uses responsive css to change it's layout for smaller devices / screens etc.

The client has asked to be able to print the website from anywhere how it appears on desktop, so whichever style of print you do then it would always print the desktop version.

We have thousands of lines of css (4,000+) so it's not as simple as just making a media print{}.

The following is an example of the current layout:

div.container{
    font-size:16px;
}

@media (min-width: 991px) {
    div.container{
        font-size:18px;
    }    
}

@media (max-width: 991px) and (min-width: 768px){
    div.container{
        font-size:20px;
    }           
}

@media (max-width: 991px)  {
    div.container{
        font-size:22px;
    }           
}

The problem is when you press ctrl + p for your print preview, the print area is smaller and thus the smaller media css is applied and we don't see the website as we do on a desktop screen.

Is there anyway to apply the @media css but prevent it from affecting the print version?

@media (max-width: 991px),
!print{

}

Answer 1

You could use @media screen instead of just @media so that the codes will work in screen but not in the print version.

Example:

@media screen and (min-width: 991px) {
    div.container{
        font-size:18px;
    }    
}