@media规则在css2中就有介绍，针对不同媒体颗星可以定制不同的样式规则。例如：你可针对不同的媒体类型(包括显示器、便携设备、电视机等等)设置不同的样式规则。但这些多媒体类型在很多设备上支持还不够友好
CSS3多媒体查询根据设置自适应显示。媒体查询可用于检测很多事情，例如：
viweport(视窗)的宽度与高度
设备的高度与宽度
朝向(智能手机横屏与竖屏)
分辨率
|
值 |
描述 |
|
all |
用于所有多媒体类型设备 |
|
|
用于打印机 |
|
screen |
用于电脑屏幕，平板，智能手机等。 |
|
speech |
用于屏幕阅读器 |
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
@media not|only mediatype and (expressions) { CSS 代码...; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>媒体查询</title> <style> body { background-color: pink; color: #fff; } ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; display: block; } /*大屏幕*/ @media screen and (min- 1200px) { body { background-color: brown; } } /*平板电脑与小屏电脑之间的分辨率*/ @media screen and (min- 768px) and (max-979px) { body { background-color: blue; } } /*横向放置的手机和竖向放置的平板之间的分辨率*/ @media screen and (max-767px) { body { background-color: blueviolet; } } /*竖向放置的手机以及分别率*/ @media screen and (max- 480px) { body { background-color: black; } } </style> </head> <body> <h1 >重置浏览器窗口查看效果！</h1> <p>超大屏幕 (min- 1200px) 红色</p> <p>正常屏幕 (min-980px)and(max- 1200px) 粉色</p> <p>平板电脑与小屏电脑之间的分辨率(min- 768px) and (max-979px) 蓝色</p> <p>横向放置的手机和竖向放置的平板之间的分辨率(max-767px) 紫色;</p> <p>竖向放置的手机以及更小分别率 黑色</p> </body> </html>