@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-width: 1200px) { body { background-color: brown; } } /*平板電腦與小屏電腦之間的分辨率*/ @media screen and (min-width: 768px) and (max-width:979px) { body { background-color: blue; } } /*橫向放置的手機和豎向放置的平板之間的分辨率*/ @media screen and (max-width:767px) { body { background-color: blueviolet; } } /*豎向放置的手機以及分別率*/ @media screen and (max-width: 480px) { body { background-color: black; } } </style> </head> <body> <h1 >重置瀏覽器窗口查看效果！</h1> <p>超大屏幕 (min-width: 1200px) 紅色</p> <p>正常屏幕 (min-width:980px)and(max-width: 1200px) 粉色</p> <p>平板電腦與小屏電腦之間的分辨率(min-width: 768px) and (max-width:979px) 藍色</p> <p>橫向放置的手機和豎向放置的平板之間的分辨率(max-width:767px) 紫色;</p> <p>豎向放置的手機以及更小分別率 黑色</p> </body> </html>