@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：
<html>
% j* p4 ]3 z9 b* a6 c6 T% g4 a- h<head>. A g( h8 H# T* a+ a: D, a7 B
6 n, e6 _4 S/ r- p3 ]( {6 ^' J
<style>
+ B/ E% c8 ^7 K' e$ i+ k) d@media screen: _! w- d. U6 g' d" @" ~# v6 N' u
{: i0 `4 \1 m7 h
p.test {font-family:verdana,sans-serif; font-size:14px}
~8 M y5 n1 P! O& L2 ~! k" ~}- v, l2 F. m/ _' P5 u! V
3 {( ~- _% o& [: `1 v4 i6 C@media print
' d6 d" c7 x) j& g% f{7 W0 u/ X7 v2 W H. u
p.test {font-family:times,serif; font-size:10px}
8 j7 P! ~/ F @$ _3 D! [% u9 @) W}$ @" Q* \3 y( f% i% D+ \ e4 L
V% |/ i( D7 ~6 M
@media screen,print5 |. [: a3 d o* @; v9 _9 h
{! b3 c1 P8 R5 t( U P2 V4 i8 ^
p.test {font-weight:bold}* S. y* K+ _8 C
}. K& k$ L7 {9 k- O
</style>
. i9 [: X5 I% g o, @+ L- W
& N+ D7 N9 t( {. K' w0 D</head>
3 E' s$ b) z* K8 C7 w$ z
# D- x3 l5 G5 V% T v P<body>....</body>% u3 N) G. {& y2 N. R
0 {# X% Q0 k3 r3 D
</html>
发表于 11-28-2011 05:42