@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：
<html>
6 ~" V# S+ N, ?/ \. ?+ H- M<head>
, c! ?& S6 X" G8 U( y A' j
6 w% O- A$ L$ h1 t- X9 [' j' y4 m9 }<style>
4 V7 s" {) J5 F4 D@media screen
2 r/ S4 `1 l$ Z) w{
1 f5 E- \% g/ U% j% R, n! Xp.test {font-family:verdana,sans-serif; font-size:14px}* r' `% X/ ]. c. z* \
}
6 l/ f; c& w8 \' N/ g- I2 \8 D
* M9 P: F' y+ U* ^# C4 I% K@media print
: W8 n% o) S, w, _7 m{
, x+ e) g& b/ `1 Y5 ep.test {font-family:times,serif; font-size:10px}
, B4 ^' {6 ^8 i& k3 W/ L2 l}' |% L: g* {& F+ i8 U
P r$ }2 F# H" i) I' B- E@media screen,print9 D2 g, u: i6 }/ O: K$ V5 }
{
# |, s$ h9 o8 f s4 h6 `8 m2 b' w' Np.test {font-weight:bold}
% n. x0 |) A( V2 d& s8 U}
& h; T) o0 ]% o3 z! m+ U: s) h</style>
& n; M" v M$ ?: C9 z' v" ~7 t, d+ h3 B# j( q: m+ h
</head>9 u3 m8 X W w, z% e$ N, y
- J1 W8 Y, o" t
<body>....</body>/ i8 z) ~4 K% a* h
: X- [, x% Z2 Y: `! ?" U& J# v</html>
发表于 11-28-2011 05:42