A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks

         很早就看到过使用media来实现针对具体设备的css设置,如media="screen"面向的是普通的浏览设备,如浏览器等,media="print"面向的是打印设备,如打印机,这样我们就可以只为一个网页设定两个css就可以实现打印版本与浏览版本显示效果的控制。今天正好需要,于是就做了个测试,果然好用,赶快总结下来。

在网上查了一下type类型包括如下内容:
Different Media Types
不同的媒介类型
Note: The media type names are not case-sensitive. 注意:媒体类型名称不区分大小写

Media Type 描述
all              Used for all media type devices
可用在所有媒介设备上
aural          Used for speech and sound synthesizers[发音]
braille         Used for braille tactile feedback devices[触觉]
embossed   Used for paged braille printers[盲人专用打印机]
handheld    Used for small or handheld devices[移动]
print          Used for printers[普通打印]
projection   Used for projected presentations, like slides[幻灯片]
screen        Used for computer screens[屏幕]
tty             Used for media using a fixed-pitch character grid, like teletypes and terminals[电报]
tv              Used for television-type devices[电视]

偶的测试代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
<title> new document </title>
  
<meta name="generator" content="editplus" />
  
<meta name="author" content="" />
  
<meta name="keywords" content="" />
  
<meta name="description" content="" />
  
<link rel="stylesheet" href="common.css" type="text/css" media="screen" />
  
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
</head>

<body>
  
<h1>打印标题</h1>
  
<p>
  
<h2>CSS自动实现网页打印版本 </h2>
  
<h3 id="print">打印版本的标题</h3>
  
<h3 id="web">网页版本的标题</h3>
  
<xmp>
  许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。

  也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:

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

  第1行就是显示,第2行是打印,注意其中的media属性。
  
  但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。
  
</xmp>
  
</p>
</body>
</html>

然后针对两个css分别定义不同的内容。
如print.css定义body{background:none},#web{display:none},
在web.css中定义body{background:(bg.gif) repeat;}#print{display:none}

打印之后可以看到在打印版本没有背景图,且“网页版本的标题”不显示。而浏览器显示为有背景图片,且“打印版本的标题”不显示,这个在实际中还是非常有用的。

posted on 2007-10-22 17:15 Yemoo'S JS Blog 阅读(1119) 评论(0)  编辑 收藏 引用 所属分类: HTML/XHTML/CSS
只有注册用户登录后才能发表评论。