@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：
<html>
8 ?, O, G% @. Y- L7 X$ `<head>
* L2 `: q4 C" ^: Z! A0 y7 W$ G) l) b) f' [6 w( v
<style>7 [; q% Q# h& \( L- Q+ Z' Y8 ]
@media screen* @: C& H4 `9 i: n1 q1 D
{! `2 {8 C7 t" h3 e7 D
p.test {font-family:verdana,sans-serif; font-size:14px}
g' z" P# W* g}2 N( T* {5 l% b$ p
$ x! K. b5 f. y; k" u* f@media print
, Y( Y4 j) s, E4 \, ?" i( f2 z{+ L) R9 g3 i5 G' n0 n
p.test {font-family:times,serif; font-size:10px}& x4 M7 ^7 _: q" j& ^+ X1 j# }- k
}
3 e% v' m6 y- u! \6 O3 N0 u
4 s/ X- [3 d0 p6 |1 |6 ]6 R0 T* T@media screen,print
4 B! ?/ v/ t+ X; c1 @{6 g+ S) P+ w. T% _& _
p.test {font-weight:bold}% h6 A3 g9 V+ r0 Q6 j/ D N
}! e$ k: a6 F* {
</style>' d$ ?1 S& d: {4 d% B
5 |" O- p7 F1 e6 G8 W w</head>
, C1 m; n; I G% o: A. X) Y
3 m6 i' y( `7 ]* p<body>....</body>
1 y' R7 W4 I* v& B& V, u3 e) F- A, i* f* E6 E V) b% B
</html>
发表于 11-28-2011 05:42