CSS Media Queries 是一个强大的工具，用于创建响应式网站布局。
它可以用来控制元素在不同屏幕分辨率和窗口大小下的行为，有效地消除了设计单独的移动版本网站的需要，并确保与各种手持设备的兼容性。

大多数现代浏览器都支持媒体查询。

使用媒体查询的优势之一是我们可以创建一个半固定布局，宽度以像素为单位定义，但仍然可以根据可用的屏幕空间进行调整。

下面的示例将告诉用户代理，如果设备有屏幕，并且屏幕的分辨率在 321 到 768 像素宽之间，则将使用给定的 StyleSheet，之后我们将有另一个 StyleSheet 接管。

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)">

如果分辨率大于 1600 像素宽，则应仅加载以下样式表。

<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1600px)">

在样式表中使用媒体查询

使用媒体查询的一种更简单的方法是创建针对特定屏幕分辨率的块，并将这些块保留在主 CSS 样式表中。
例如，下面的块将针对每个自己的窗口大小或者屏幕分辨率。

#ColumnA {width:30%;float:right;}
  #MainContent {width:75%;float:left;}
  #MainContent img {max-width: 95%;}
@media screen and (max-width:720px) {
  #ColumnA {width:20%;}
  #MainContent {width:75%;}
}
@media screen and (max-width:400px) {
  #ColumnA {width:95%;float:none;}
  #MainContent {width:95%;float:none;}
  #MainContent img {width:94%;display:block;margin:0 auto;}
}

想象一个基本的基于浮动的两列布局。
以上将充分控制不同窗口大小中元素的行为。
它还对内容中的图像应用 max-width，防止它们在没有足够空间时溢出。