前提
Bootstrapで作成したレスポンシブサイトを印刷しようとすると、タブレット表示(画面幅 < 768px)のレイアウトになってしまいます。
希望としては、画面幅1400pxのPC画面表示レイアウトのままプリントアウトできるように表示したいと考えています。
このサイト(https://webukatu.com/wordpress/blog/28004/#CSS-7)を参考に、print.cssを作成し、下記コードを記述し、css群の最後に読み込ませました。
css
1body { 2 width: 1400px !important; 3 zoom: .8; 4}
print.cssの適用の前後での違いは下記のとおりです:
適用前:タブレット表示のレイアウトで、PC表示時には横並びのカラムは縦に表示されます。
適用後:アイコンや文字は相変わらずタブレット表示のレイアウトと同じですが、画面幅は大きく、文字は画面幅いっぱい、コンテンツは画面中央に縦並びで小さく表示されており、不自然(無駄な空白が多い)な状態です。
あなたの回答
tips
プレビュー