問題 × 解決策

レスポンシブ対応したサイトをA4縦で印刷(プリント)する時にcssを適用させる方法

問題

レスポンシブ対応したサイトをA4縦で印刷(プリント)すると、CSSが適用されていない。

解決策

メディアクエリで、PC用のCSS設定「 @media all and (min-width: 768px) { 」の「@media」の後に、「print,」を追加する。

 

プリント時のA4縦のwidthが影響しています。

サイトをプリントアウトしたい時というのは、よくあると思います。プリントする時はA4の縦のパターンが一番多いのではないでしょうか。ですが、いざ印刷(プリント)すると、CSSが適用されていない状態で出てきてしまう!そんな場合は、レスポンシブ対応時のメディアクエリを見直す必要があります。

A4縦のwidthは、595pxです。

A4縦のwidthは595pxなのですが、よくあるPC用のメディアクエリは 「 @media all and (min-width: 768px) { 」であるため、条件に当てはまらなくなってしまいます。
なので「@media」の後に「print,」を付けて、「 @media print, all and (min-width: 768px) { 」とすることで、PC用のCSSをプリント時に適用させることが出来ます。

以下のサイトが詳しく書いてくれていますので、こちらも参考にしてみてください。

【 CSS3 Media Queriesを使った場合に起こる、印刷の落とし穴|プラカンブログ | WEB制作会社プラスデザインカンパニー】
https://www.plusdesign.co.jp/blog/?p=6880

コメント

コメントを残す

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

two + nine =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧