与屏幕相同的打印CSS

Question

似乎应该有一个简单的解决方案,但到目前为止我找不到一个.

我正在使用Zurb Foundation,我基本上创建一个实时表单,从表单(上面)获取输入,并使用angular.js填充内容(下面).然后,用户将页面打印为PDF.我想保留下面内容的布局,我想在打印时隐藏上面的表格.Zurb有一个很好的"隐藏打印"css规则,看起来它应该适用于上面的表单,但是当我切换打印样式表时,它基本上剥离所有CSS并回到丑陋.

建议？

Answer 1

您是否尝试过对print媒体使用 CSS 媒体查询？

.foo {
    height:150px;
    width:150px;
    background-color:#F00  // see what I did there?
}

.bar {
    height:10px;
    width:50%;
    border-radius:5px;
    background-color:#000
}

.baz {
    width:100px;
    height:150px;
    background-color:#FFF;
}

@media screen {
    .baz {
        display:block;
    }
}

@media print {
    .baz {
        display:none;
    }
}

现在，只有 的部分.baz属性成为媒体查询的目标。您可以随意将 的任何属性放入.baz查询本身的内部或外部。同样，您可以将的所有.baz属性放入媒体查询中，但我认为这不是您想要的。