与屏幕相同的打印CSS

这似乎真的应该有一个简单的解决办法，但到目前为止，我一直没有找到一个

我使用Zurb基金会，我基本上创建了一个从表单（上面）输入的实况表单，并使用盎格鲁.js填写内容（在下面）。然后，用户将页面打印为PDF格式。我想保持下面内容的布局，我想在打印时隐藏上面的表单。Zurb有一个很好的“为打印而隐藏”css规则，当应用到上面的表单时，它看起来应该工作得很好，但是当我切换打印样式表时，它基本上会剥离所有css并返回到丑陋

---

建议？

您是否尝试过对

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

的所有属性放入媒体查询中，但我想这不是您想要的。

idk关于zurb的打印样式表，没有示例，很难回答，但您可以使用weasyprint，将html/css转换为pdf的开源库

在这些类型的情况下，我所做的是为

print.css

使用一个单独的文件

<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

如果浏览器正在打印，将首先加载

global.css

文件，然后

print.css

文件将覆盖所有后续文件

---

但是请记住，所有

背景：

规则在打印时默认情况下在所有浏览器中都会关闭，因此某些样式会受到影响。

我理解媒体查询，但关键是我试图在打印时为两者使用相同的样式，而只是隐藏一些内容。将我所有的CSS复制到打印规则中似乎很麻烦。是什么阻止了你？将除类/id以外的所有样式放在媒体查询之外，只需让媒体查询应用此规则即可。我会更新我的答案，以更好地说明我的观点。这看起来很有趣，但这似乎可以很好地处理分页，我正在寻找一个简单的单页文档。天哪，我的错，我完全误解了这一点。照@phil说的做。只需在打印样式表中的表单上添加display:none。