Bootstrap响应式页面打印A4时被识别为小屏幕

CSS学习 本文总阅读量次

我正在做自己的web简历，打算做成移动端看起来也舒服的响应式页面，结果设置好@media print打印预览的时候才发现打印A4时被识别为小屏幕，可我希望的效果是打印电脑屏幕而不是手机上的显示效果。

问题描述

希望打印的效果（大屏幕）

希望打印的效果

实际打印预览（小屏幕）

实际打印预览

原因

在css样式表中设置了打印时的页面尺寸为A4，于是识别成了小屏幕：

1
2
3
4
5
6
7
8
@media print {
  @page {
     /*A4: 210mm × 297mm，size: 794px × 1123px，0边距*/
    /*171.9mm × 258.9mm，size：649px × 978px，19.05mm边距（ie浏览器默认打印边距） */
       size: 210mm 297mm; 
       margin:0mm;
    }
}

解决方法

原本我是使用了bootstrap的栅格系统实现的响应式，现在在识别到打印时重新给.col-md-4和.col-md-8分配对应的宽度：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media print {
  @page {
     /*A4: 210mm × 297mm，size: 794px × 1123px，0边距*/
    /*171.9mm × 258.9mm，size：649px × 978px，19.05mm边距（ie浏览器默认打印边距） */
       size: 210mm 297mm; 
       margin:0mm;
    }
    /* 避免被识别成小屏幕进行响应式 */
   .col-md-4{
     width: 33.3%;
   }
  .col-md-8{
    width: 66.7%;
  }
}

参考

CSS学习