necotech blog

レスポンシブサイトで印刷用レイアウトを保つ

印刷時の「拡大・縮小」の解釈がいまいち分からず難儀したけど(ブラウザによっても違うし…)、要はbodyを固定幅にすれば崩れることはなくなる。そこから印刷用の縮小をしてもいいんだけど、そうではなくCSSのtransformで縮めてやれば、ブラウザごとの差異を比較的吸収できるようだ。

@media print {
  body {
    width: 1200px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform-origin: 0 0;
  }
}
Share on Facebook
Share on LinkedIn
Pocket