レスポンシブWebデザインでの印刷対応 | コワーキングスペース7Fレスポンシブで制作したWebサイトを印刷しようとしたら、レイアウトが崩れてる！ なんてこと間々ありますよね。 印刷前提のページであれば専用のcssを用意したりしますが、そうでなければ印刷のことはあまり考えませんよね。 で、最近はほとんどレスポンシブで制作していくので、いざ出来上がったサイトをお客さんが検証して印刷プレビューをしようものなら、なんじゃこりゃとなるわけです。 レスポンシブで作ったサイトが全てそうなるわけではないのですが、cssの書き方によっては印刷時にレイアウトが崩れたりします。 今回は下記の記述が原因でした。 @media only screen and (min-width: 768px) { } レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。 この「only screen」ってやつが悪さをしてます。 読んで字の如く、「画面のみ」指定になっているんです。
