@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：
<html>4 v4 j! `, k& x# ]3 B3 Z. ^* Z
<head>% [! t5 _3 S5 z: p M
+ g& A4 u }7 d% M( G
<style>, k, r' W1 w7 S: G5 J4 F
@media screen
3 k6 z9 C! S/ X5 q" z{
$ u% c$ J0 z+ o9 M2 w. \2 E4 jp.test {font-family:verdana,sans-serif; font-size:14px}& v6 f5 l n3 \' j" m9 x$ ~, D
}
* x1 j! _- { Q& ^" u( ~' B
5 S% @ X9 s) q, f& [5 s@media print
3 p9 H/ B6 K; E$ ~ s2 j( [; z{2 o( u' A: w) P" H$ n2 o n( L
p.test {font-family:times,serif; font-size:10px}6 Y# W+ o) h& P9 U8 d
}2 \. ^1 Z6 Z! h* h6 \
# m/ E) q1 I2 D' E- Y4 F9 E! ]@media screen,print$ R4 _& p& k' ]- G4 \6 I# M+ c/ V
{
% w2 K# G s1 l% @6 U3 wp.test {font-weight:bold}
' ^0 e2 _8 x$ [9 [, G}$ W, z, Y" H. r& ]7 j3 I
</style>
! n; ]; v! Z! t6 G3 P$ V$ L9 F" o5 p F$ r+ ?
</head>+ {$ W& X4 J" D, {5 g' W- P; ^) M
0 i J) s( C# @! N2 O0 q<body>....</body>
- j- B1 v+ }3 x7 E3 \5 m2 T v, a4 C8 V
</html>
发表于 11-28-2011 05:42