很早就看到过使用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" "">
<html xmlns="">
<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}打印之后可以看到在打印版本没有背景图，且“网页版本的标题”不显示。而浏览器显示为有背景图片，且“打印版本的标题”不显示，这个在实际中还是非常有用的。
阅读(216) | 评论(0) | 转发(0) |
