（スマホ対応）レスポンシブにする際の注意点（印刷でレイアウト崩れ）

スマートフォン対応（レスポンシブ）にする時に、ブレークポイントで区切ってMedia Queriesでmobile.cssなどで上書きして、対応させる場合があります。

その時に、スマホの時だけ表示させたいので、そのパーツは
見えないようにしていますmobile.cssとかで

/* スマホで非表示させたい要素に適用*/
@media only screen and (max-width: 767px){
.hidden_xs {display:none;}
}
/* スマホの時だけ表示させたい要素に適用 */
@media only screen and (min-width: 768px){
.visible_xs_block {display:none;}
}
@media
only screen and (max-width : 767px){

ここにスマホ用のCSS記述

}

としていました。
これでも、印刷を意識していない場合は問題なかったのですが、

クライアントから印刷したときにスマホのパーツが出てきてレイアウトが崩れえていると指摘され、
確認すると、エライことに！！

という訳で、調べたところ、

スマホ用のmobile.cssだけでなく、
PC用のスタイルシート（style.css）などにも、
こういうのをつけて囲わないといけないようでした。

@media print, screen and (min-width: 768px){
ここにPC用スタイルの中身
｝

あと、スマホ用だけで、表示したり、スマホでは非表示にしたりしていた部分は、
以下のようにPC用のstyle.cssなどに逆のスタイルをつけた記述をしておかなければなりませんでした。

@media print, screen and (min-width: 768px){

.hidden_xs {display:block;}
.visible_xs_block {display:none;}

以下、その他のPC用のスタイル記述
}

これで、やっとPCで印刷するときにちゃんとPCのモニターと同じ表示で印刷できるようになりました。

ところが、もう一つ問題点が！！！

それは、実際のスマホ表示で、何か表示がおかしい！！
CSSが足りないような感じの表示になっている。

もしや、と思いよく今回CSSに追加したメディアクエリーを見てみると、

style.css（PC用）に
@media print, screen and (min-width: 768px)
と記載していたので、スマホのときはこの部分を無視されてしまっていたのが原因でした。

いつもは、mobile.cssの記述は、PC用のCSSで変更したい部分だけ上書きになるので、記述していましたが
元々のstyle.cssがスマホ表示のときに読み込まれなくなっていたので、スタイルが足りない状態になっていました。

なので、mobile.cssの記述の上に、style.cssの記述を全部持ってきて、その後ろにmobile用のスタイルを上書きするように記述したら、スマホ表示も問題なくできました。

↑これは、あとあとで気づいたので無理くりで、CSSが大きくなってしまうので、よくないですよね。。。
なので、次回からは、モバイル用に変更するCSSも上書きする部分だけじゃなくて、初めから全部移してから変更しようと思いました。

まあ、なんというか、

これでも無理くりっぽいので、正式な方法ではないような気がしますが、
ひとまず今回はこれでよしとしました！！