Instead of writing your media queries like this:

  @media only screen and (min-width: 40em) {}

simply remove the only screen and:

  @media (min-width: 40em) {}

or change it to only all if you still want to quarantine them:

  @media only all and (min-width: 40em) {}

Your responsive styles will now flow in to printed pages, too. A user can even change the paper size and orientation and it will all "just work"*

*Obviously, you'll still want to hide irrelevant elements

This was originally published on Coderwall


1,444 0 2