媒体查询用于创建响应式网页设计。这意味着网页的视图因屏幕或媒体类型而异。
screen：用于设置媒体查询的屏幕大小。可以使用 max-width 和 min-width 设置屏幕尺寸。屏幕尺寸因屏幕而异。
句法：
@media screen and (max-width: width)示例：此示例使用媒体查询，它在显示区域的最大宽度为 400 像素时有效。它指定屏幕而不是其他可用的媒体类型，最常见的另一种是打印。
The @media Rule
Resize the browser window. When the width of
this document is 400 pixels or less, the
background-color is "green", otherwise it
is "lightblue".
输出：
屏幕尺寸大于 400 像素： 
屏幕尺寸小于 400px： 
only screen： only关键字用于防止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。
句法：
@media only screen and (max-width: width) 示例 2
The @media Rule
Resize the browser window. When the width of
this document is 400 pixels or less, the
background-color is "green", otherwise it
is "lightblue".
输出：
屏幕尺寸大于 400 像素： 
屏幕尺寸小于 400px： 