css - 如何切换到 lg viewport 以在 bootstrap 3 上进行打印预览？

Question

当我尝试打印网站时，bootstrap 的打印 View 似乎自动切换到 xs，有没有办法让打印 View 改为 lg 视口(viewport)？

有点像

@media print {
  .container {
    @media (min-width: $screen-sm-min) {
      width: $container-lg;
    }
    @media (min-width: $screen-md-min) {
      width: $container-lg;
    }
    @media (min-width: $screen-lg-min) {
      width: $container-lg;
    }
  }
}

Answer 1

大多数浏览器的打印都很棘手 - 问题是根据浏览器、默认纸张大小和它的方向(纵向或横向)，页面将以 72ppi、96ppi 或 144ppi 打印。

在 Bootstrap 中，媒体查询建立了一个像素宽度带……例如“xs”介于 544px-767px 之间，因此根据(打印的)页面宽度，您的网站在打印时可能会恢复为“xs”或“sm”宽度变体。

您的尝试几乎是正确的...只是(记住我们无法预测打印的 px 宽度)我会考虑打印全页宽度，无论是否流畅(即打印页面始终是流畅的).

假设您可以访问源 .less 文件，请尝试类似...

@import "variables.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

@media print {
  .container,
  .container-fluid {
    .container-fixed();
    width: auto;
    min-width: 750px;
  }
}