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

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

サンプルコード

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

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;
	}
}

印刷対応後のデモページ
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31