如何在屏幕上显示印刷媒体的CSS? [英] How to show print media css on screen?

查看:109
本文介绍了如何在屏幕上显示印刷媒体的CSS?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当有人打印时,我有一个不同的CSS(下面是我如何做的一个例子)。但我想知道,我想制作一个自定义的预览打印(而不是浏览器中的常规打印),但我想知道是否可以以某种方式获取它,以便打印媒体CSS将被应用,因为我想在屏幕上显示他们将要在纸张上打印的预览。任何想法?

I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?

<html>
<body>

<style type="text/css">
body 
{
   font-size: 62.5%;
   background-color:black;
}
h1 
{
   color: red;
}
@media print 
{
body{
background-color:yellow;
}

  h1 {
  color: black;
   }
}
</style>

<h1>This is just a test</h1>

</body>
</html>


推荐答案

最简单的方法是创建一个print.css样式表通常包含在 print 指定的媒体中。

The easiest way would be to create a print.css style sheet that's normally included with print media specified.

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

然后在打印预览屏幕上,您可以使用与 screen media set:

Then on your print preview screen, you could use the same print.css with screen media set:

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

这篇关于如何在屏幕上显示印刷媒体的CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆