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

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

サンプルコード

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

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年10月
 12345
6789101112
13141516171819
20212223242526
2728293031