Mobile first design and printing

Question

I have a mobile first website with four CSS files :

1. Main css - @media all and (min-width: 240px)
2. Small mobile devices - @media all and (min-width: 481px)
3. Large mobile devices - @media all and (min-width: 769px)
4. Desktop - @media all and (min-width: 981px)

When I try to print something from the website in desktop, on the print preview it actually looks like the mobile version. Even in landscape there are apparently not enough pixels to load the min-width 981px. That's problem number one.

Problem number one is fixed by adding the word "device" to the min-width, but then problem two, you can't see the mobile design on desktop and I need it to be visible.

Any ideas ?

Answer 1

创建一个@media print部分。

Answer 2

You have to just make the corect sizes and styling like mentioned you can also print different points like this:

@media print and
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

    /* Style adjustments for high resolution devices */

}



@media print {

}