レスポンシブサイトを印刷するときにレイアウトが崩れる

レスポンシブサイトで印刷時にレイアウトが崩れることがあったので、その対応方法を調べてみました。

サンプルコード

印刷時にレイアウトが崩れるサンプルです。

HTML

<div class="wrapper">
	<header class="header">
		<div class="inner">ヘッダー</div>
	</header>
	<div class="contents">
		<div class="inner">
			<div class="main">
				<p>メイン部分</p>
			</div>
			<div class="sub">
				<p>サブ部分</p>
			</div>
		</div>
	</div>
	<footer class="footer">
		<div class="inner">フッター</div>
	</footer>
</div>

CSS

641px以上のときに.mainと.subを横並びにします。

@media screen and (min-width: 641px) {
	.main {
		float: left;
		width: 60%;
	}
	.sub {
		float: right;
		width: 35%;
	}
	.footer {
		clear: both;
	}
}

印刷時はMediaQueriesの指定が効いておらず、.mainと.subが横並びになりませんでした。
印刷時にレイアウトが崩れるデモページ
　

サンプルコード

MediaQueriesの指定にprintを追加することで対応できました。

CSS

@media screen and (min-width: 641px), print {
	.main {
		float: left;
		width: 60%;
	}
	.sub {
		float: right;
		width: 35%;
	}
	.footer {
		clear: both;
	}
}

印刷対応後のデモページ