問題
レスポンシブ対応したサイトをA4縦で印刷（プリント）すると、CSSが適用されていない。
解決策
メディアクエリで、PC用のCSS設定「 @media all and (min-width: 768px) { 」の「@media」の後に、「print,」を追加する。
プリント時のA4縦のwidthが影響しています。
サイトをプリントアウトしたい時というのは、よくあると思います。プリントする時はA4の縦のパターンが一番多いのではないでしょうか。ですが、いざ印刷（プリント）すると、CSSが適用されていない状態で出てきてしまう！そんな場合は、レスポンシブ対応時のメディアクエリを見直す必要があります。
A4縦のwidthは、595pxです。
A4縦のwidthは595pxなのですが、よくあるPC用のメディアクエリは 「 @media all and (min-width: 768px) { 」であるため、条件に当てはまらなくなってしまいます。
なので「@media」の後に「print,」を付けて、「 @media print, all and (min-width: 768px) { 」とすることで、PC用のCSSをプリント時に適用させることが出来ます。
以下のサイトが詳しく書いてくれていますので、こちらも参考にしてみてください。
【 CSS3 Media Queriesを使った場合に起こる、印刷の落とし穴｜プラカンブログ | WEB制作会社プラスデザインカンパニー】
https://www.plusdesign.co.jp/blog/?p=6880
コメント