インターコードの下っ端です。

弊社でレスポンシブルサイトのコーディングをさせて貰う際に各画面サイズに対応させる為、
よく下記のようなCSSを使っています。

@media (max-width: 767px) { /*スマホレイアウト*/}
@media (min-width: 768px) { /*タブレットレイアウト*/}
@media (min-width: 992px) { /*PCレイアウト*/}
@media (min-width: 1200px) { /*PC大画面レイアウト*/}

どこかのレスポンシブルサイトの作り方を解説するサイトで紹介されていた方式なのですが、
この書き方だと印刷時にスマホレイアウトになってしまうことに最近気づきました。
今現在インターコードのホームページがその仕様になっています。

↓実際に印刷するとこんな感じになります。↓

いやはやお恥ずかしい。近々直します。

これを問題を解決する方法を試行錯誤しながら色々CSSを弄っていたのですが、
すごく簡単に済むことが分かりました。

それがこの書き方。このメディアクエリの設定を一部変更するだけ。

@media only screen and (max-width: 767px) { /*スマホレイアウト*/}
@media print, screen and (min-width: 768px) { /*タブレットレイアウト*/}
@media print, screen and (min-width: 992px) { /*PCレイアウト*/}
@media print, screen and (min-width: 1200px) { /*PC大画面レイアウト*/}

他のCSSは弄る必要がないので簡単ですねー。