Bootstrap3のWEBページを印刷してもいい感じに
今までウェブサイトを印刷したときのことは全く考慮してなかった。Bootstrapのデフォルト機能にお任せだったけれど、印刷しても出来るだけ読みやすくなるようにしてみた。
環境： Bootstrap 3.3.7, less 2.7.2
１．印刷したときの横幅
Bootstrapの場合、印刷するとExtra small devices(.col-xs-)が適用される。
これは横幅が約547pxになるから。
＜計算方法＞
A4縦サイズの横幅は210mm
印刷するときのデフォルトマージンが約10mm
画面解像度が72dpi
1インチ=25.4mm、1mm=0.04インチ
A4の表示領域：210mm - (10mm x 2) = 190mm
mmをinchに変換：190mm x 0.04inch = 7.6inch
inchをpxに変換：7.6inch x 72dpi = 547.2px
２．Bootstrapで印刷用CSS
まずはBootstrapのprint.lessをimportしない。
替わりに下記CSSを読み込むと、small device(.col-sm-)が適用されたレイアウトに出来る。
これをlessで表現すると
@media print {
.make-grid(sm);
}
Bootstrapのgrid.lessを参照。
あとの細かい箇所は必要なときに追加していく。
@media screen {}
も有用。
< Related Posts >