Foundation 5 和页面打印

Posted 2023-03-06

【中文标题】Foundation 5 和页面打印

【英文标题】：Foundation 5 and page printing

【发布时间】：2014-03-06 14:49:37

【问题描述】：

我正在使用 Zurb 基金会。 我正在尝试完全按照它在大屏幕上的样子打印页面，但所有内容都被堆叠（并且浮动错误）。

通过在f​​oundation.min.css中用“print, screen”替换每个“screen”出现，我成功地在打印页面中添加了网格。

问题是现在采用的网格是小网格。

我在基金会支持上阅读了这篇文章，但老实说，我不知道我应该做什么。我需要用 sass 重新编译基础吗？

http://foundation.zurb.com/forum/posts/412-printing-paper-copies-of-site-built-on-foundation

我该怎么办？ 谢谢。

【参考方案1】：

这三个 sass 循环让我在为打印页面设置样式时变得更轻松，而且效果很好。

变量 $total-columns 来自基金会的核心设置。

  @for $i from 1 through $total-columns 
    .large-#$i 
      width: 100% * ($i/$total-columns);
    
  

  @for $i from 1 through $total-columns 
    .medium-#$i 
      width: 100% * ($i/$total-columns);
    
  

  @for $i from 1 through $total-columns 
    .small-#$i 
      width: 100% * ($i/$total-columns);
    
  

【参考方案2】：

这里是 CSS：

@media print 
  .large-1 
    width: 8.33333%;
  

  .large-2 
    width: 16.66667%;
  

  .large-3 
    width: 25%;
  

  .large-4 
    width: 33.33333%;
  

  .large-5 
    width: 41.66667%;
  

  .large-6 
    width: 50%;
  

  .large-7 
    width: 58.33333%;
  

  .large-8 
    width: 66.66667%;
  

  .large-9 
    width: 75%;
  

  .large-10 
    width: 83.33333%;
  

  .large-11 
    width: 91.66667%;
  

  .large-12 
    width: 100%;
  

来源：http://foundation.zurb.com/forum/posts/2820-printing-foundation-5

【讨论】：

像魅力一样工作！谢谢

【参考方案3】：

遵循@Hashem Qolami 的回答，但需要在 for 循环中进行一些小的更改，因为由于某种原因，它不会计算列的百分比值以及 Foundation 5 中的 gridCalc() 已经 deprecated (line #22)。所以你应该使用如果您直接使用percentage() 计算百分比，grid-calc() 会更好：

@media print 
  @for $i from 1 through $total-columns 
    .large-#$i 
      width: percentage($i / $total-columns);
    
  

它会做一些基本的事情，但如果您使用一些技巧创建自定义 html 结构，则需要更多技巧。

将整个html的宽度设置为大尺寸：

@media print 
  html 
    width: rem-calc(1280px);
  

  @for $i from 1 through $total-columns 
    .large-#$i 
      width: percentage($i / $total-columns);
    
  

最后在_settings.scss（第82 行附近）将$screen 值从"only screen" 设置为"only print, screen"：

$screen: "only print, screen";

【讨论】：

嗨 - 我一直在用它来做大屏幕，效果很好。现在我将此有角度的网站转换为 android 应用程序，但打印布局与屏幕显示不同，我用 .small 和 .medium 重复了 for 循环 - 但没有变化，知道吗？谢谢

【参考方案4】：

我需要用 sass 重新编译基础吗？

嗯，是的。您需要创建一个自定义 sass 文件并将打印规则放入其中。然后用 Sass 编译器重新编译文件。

在scss/ 文件夹中，您有这两个normalize.scss 和foundation.scss 文件。创建一个名为app.scss 的新文件并导入规范化和基础，如下所示：

// Import the normalize.scss
@import "normalize";

// Import the foundation.scss
@import "foundation";

// Your own SCSS here...

然后在app.scss文件as suggested的末尾加上下面的代码sn-p by Rafi Benkual:

例如，您可以通过以下方式强制大网格打印友好 将以下代码添加到您的项目中：

// This would make the large grid function like a print grid
@media print 
  @for $i from 1 through $total-columns 
    .large-#$i 
      width: gridCalc($i, $total-columns);
    
  

注意：这可能有效，也可能无效。我自己没有尝试过。然而，它在 Foundation Forum 被认为很有帮助。

$total-columns 变量在scss/foundation/components/_grid.scss 文件中定义，您可以通过编辑scss/foundation/_settings.scss 覆盖它（作为其他设置）。因此，您需要在基础文件之前导入@import "foundation/settings";。

最后，compileapp.scss 归档：sass --watch app.scss:app.css

【讨论】：

在gridCalc() 下方查看 Sas Sam 的回答，以支持grid-calc()