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

Create a @media print section.