@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：
<html>" J7 g# X( k4 P j- y7 y! B; [
<head>4 a$ r9 ?! o$ U1 f
# n) f3 g5 ]9 @<style>4 V2 f3 w/ b5 u
@media screen
4 H* {& I. y; [7 i! {, n{4 Y& a/ |1 ?! Q% `+ M0 V
p.test {font-family:verdana,sans-serif; font-size:14px}, D" u, i: ]+ H# i5 i6 h
}# [& _. a) h( S/ V# A7 Z, \1 y
& E! k+ p$ u/ O- @" X5 ]@media print: P8 b9 n+ e. [' l' a
{9 [; X: `! a* Z7 M
p.test {font-family:times,serif; font-size:10px}
2 L9 j# ~" u3 I. T$ ^, w}
, k. Y$ Q# W3 I& a
/ u7 d& [; q; @" l1 l9 k@media screen,print
" q, M; d. x6 z3 z% s{
' @9 C1 u3 x% e) B0 o4 j3 g- |; bp.test {font-weight:bold}6 b: g) X- h9 ?$ f r0 U
}
, m+ }: X, |: o j/ [</style>! Y+ S- O$ n7 l5 ^0 ]
( s8 H4 O* j+ k0 T</head>
$ f6 T6 p5 W" J- I# N: ?; e) K6 E& }/ _ U* P$ p: R
<body>....</body>
6 r6 k, @# {- s# ^ U: P8 Q
" W' X1 k; p: S/ \: |( f</html>
发表于 11-28-2011 05:42