Question

我有一个母版页，我在其中添加了两个用于打印和屏幕媒体的css文件：

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

我已经为我的css添加了一些代码：

@media print
  {
  p.test {font-size:20px;color:red;}
  }
@media screen
  {
  p.test {font-weight:bold;}
  }

当用户在浏览器中查看页面或单击浏览器的打印按钮时，它可以正常工作。

但是如何在我的桌面（屏幕媒体）中浏览时强制页面显示在打印介质中？！

基本上，我想用HTML显示页面的打印友好版本。

Answer 1

您不能直接使用媒体（或媒体查询），因为您无法标记“本地”页面或网页。

HTML5可以帮助您使用缓存清单。

文档：http://www.w3.org/TR/2011/WD-html5-20110525/offline.html

你的HTML必须有：

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

并且清单必须包含：

CACHE MANIFEST
print.css

在线你将使用theme.css覆盖print.css（但要注意！重要的css attribs），离线你根本就没有theme.css

如何在HTML中加载页面的打印友好版本？

1 个答案: