Question

我正在设计我的简历/作品集，并意识到拥有一个好的打印样式表会很方便。我的简历使用两列布局，结果对于打印页面来说太宽了。所以我决定在我的一个样式表中添加@media print规则，这会强制将页面呈现为单个列。

我立即注意到了问题。我有许多样式规则，使用相对定位来排列我的两列布局中的div。一旦两列消失，这些规则会导致简历中的项目重叠。为解决此问题，我将违规规则包含在@media screen规则中，认为这会导致它们在打印时被忽略。

麻烦的是没有！当我使用print-preview查看我的页面时，我会看到@media print规则中的样式和@media screen规则中的样式！我做了一些简单的测试（改变不同表格中的东西的颜色），以确保我没有产生幻觉。我现在相信我误解了样式表的应用方式。

我正在使用firefox 20.0和chrome 26.0.1410.63，我的简历正在使用Rails 3.2.12（所以我使用资产管道）。我有以下assets/树：

app/assets/stylesheets/
├── application.css
├── bootstrap_and_overrides.css
├── glyphicons-free.css
└── modules
    └── ABC_TECHNOLOGIES
        ├── barista-experience.css
        ├── education.css
        ├── general_layout.css
        ├── print_layout.css
        └── programming_experience.css

2 directories, 8 files

鉴于此树结构和单个清单文件（application.css），我简历的head中的所有样式表链接都具有属性media=all。所以它们都应该适用于所有情况。但是，我在不同的样式表中包含了更多具体的@media规则，如下所示。

在app/views/layout/application.html.haml我试过了：

= stylesheet_link_tag "application", :media => "all"

以及

= stylesheet_link_tag "application"

没有明确的媒体声明。当我这样做时，所有样式规则似乎都在打印预览中被忽略。

例如，在barista-experience.css中，我有样式来调整元素的高度，宽度和位置。

@media screen {
  #barista-experience > .span12 {
    height: 425px;
  }

  #barista-experience.row.outer.grey-border {
    height: 425px;
  }

  #barista-experience .span6.company-profile.right {
    position: relative;
    top: -275px;
  }

  #barista-experience .span6.company-profile.left {
    position: relative;
    top: -19px;
  }
}

在print_layout.css中，我已经包含了一些样式规则，这些规则在此周围绘制线条，以及修复某些特定元素的宽度。

@media print {

  .header * {
    border:1px solid #0000AA;
  }

  .header .span3 {
    border-radius: 0px 10px 0px 0px;
  }

  .outer .span6 {
    width: 700px !important;
    border:1px solid #AA0000;
    padding:0px;
  }

  .outer.grey-border {
    border: 2px solid #00BB00;
  }

  .outer.grey-border {
    page-break-after: avoid;
  }

}

我的期望是，当我在打印预览时，@media screen规则将被完全忽略。也许我误会了什么？

使用@media规则定义可打印样式

0 个答案: