与屏幕相同的打印CSS [英] Same print CSS as screen

问题描述

似乎应该有一个简单的解决方案，但到目前为止我一直没有成功找到一个。

我使用Zurb基金会和我基本上创建一个实时表单，从一个窗体（上面）接收输入，并使用angular.js填充一个内容（下面）。用户然后将页面打印到PDF。我想保留下面的内容的布局，我打算隐藏上面的表单。 Zurb有一个很好的隐藏打印css规则，似乎它应该工作很好，当应用于上面的形式，但是当我切换打印样式表，它基本上删除所有CSS，回到丑​​陋。

建议？

解决方案

您尝试使用CSS媒体查询 print 媒体？

  .foo {
 height：150px; 
 width：150px; 
 background-color：＃F00 //看我在那里做了什么？ 
} 
 
 .bar {
 height：10px; 
 width：50％; 
 border-radius：5px; 
 background-color：＃000 
} 
 
 .baz {
 width：100px; 
 height：150px; 
 background-color：#FFF; 
} 
 
 @media屏幕{
 .baz {
 display：block; 
} 
} 
 
 @media print {
 .baz {
 display：none; 
} 
} 
  

现在，只有一些 .baz 的属性由媒体查询定位。您可以随意在查询本身内部或外部放置任何 .baz 的属性。同样，您可以将 .baz 的全部属性放在媒体查询中，但我认为这不是您要查找的内容。 / p>

It seems like there should really be an easy solution to this, but so far I've been unsuccessful in finding one.

I'm using Zurb Foundation and I'm basically creating a live form that takes inputs from a form (above), and fills in a content (below) using angular.js. Users will then print the page to a PDF. I'd like to maintain the layout I have for the content below, and I'd like to hide the form above when printing. Zurb has a fine "hide-for-print" css rule that seems like it should work just fine when applied to the form above, but when I toggle print stylesheets, it basically strips all CSS and goes back to ugly.

Suggestions?

解决方案

Have you tried using CSS media queries for print media?

.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;
    }
}

Now, only some of .baz's properties are targeted by the media queries. You can feel free to put in any of .baz's properties inside or outside of the queries themselves. Likewise, you can put all of .baz's properties in the media query, but I gather that's not what you're looking for.

这篇关于与屏幕相同的打印CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！