[CSS3]レスポンシブで メディアクエリ使う際の注意点 印刷でレイアウトが崩れる対処

クライアントさんから指摘あるまで気にしてなかったのですが、
レスポンシブでメディアクエリで画面幅に沿ってCSS切り替えする際に

@media screen and ~

の記述だと 文字通り 「画面のみ」の表示となってしまうので

<style type="" media="all">

で対応させていても、スルーされます。なんてこったい。

対処方法は

@media print, screen and ~

と書くだけですが、スマホ向けのCSSでも書いてしまうと、
印刷プレビュー時にスマホのレイアウトが出てきてしまうので
基本はPCのみでOKだと思います。

印刷プレビュー マジであせりました…