【媒体类型 & 媒体查询】
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：
<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head> <body> .... </body> </html>
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) { body { background-color:lightblue; } }
参考：
1、http://www.runoob.com/css/css-mediatypes.html
2、http://www.runoob.com/cssref/css3-pr-mediaquery.html
原文：http://www.cnblogs.com/tekkaman/p/6923537.html