レスポンシブサイトの印刷でスマホ用のレイアウトになるときの対処法

レスポンシブサイトの印刷を実際に行うときに、スマホ用のレイアウトで表示されてしますことがあります。
今回はそれに対する対処法です。

@media (max-width: 767px) /*スマホ用のレイアウト*/
@media (min-width: 1200px) /*PC用のレイアウト*/

基本画面幅によってレイアウトを変更する場合上記のように記述しますが、
この書き方だと印刷する際スマホ表示になってしまいます。

なので、メディアクエリの設定を変更します。

@media only screen (max-width: 767px) /*スマホ用のレイアウト*/
@media print, screen and (min-width: 1200px) /*PC用のレイアウト*/

pc表示の時にとプリントする際にはprint, screen andをメディアクエリに記述することで解決できます。