如何切换到 lg 视口以在 bootstrap 3 上进行打印预览？

Posted 2023-03-06

【中文标题】如何切换到 lg 视口以在 bootstrap 3 上进行打印预览？

【英文标题】：How can I switch to lg viewport for the print preview on bootstrap 3?

【发布时间】：2016-09-22 18:54:49

【问题描述】：

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

类似

@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;
    
  

【参考方案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;