在 992p x或更小的屏幕上，从四列变为两列 */@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }}/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }}

亲自试一试

提示：更现代的创建列布局方法是使用 CSS Flexbox（请参见下面的例子）。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动（如上所示）。

如需学习有关弹性框布局模块的更多知识，请学习 CSS Flexbox 这一章。

如需学习有关响应式 Web 设计的更多知识，请学习我们的 响应式 Web 设计教程。

实例

/* 弹性盒的容器 */.row {
  display: flex;
  flex-wrap: wrap;}/* 创建四个相等的列 */.column {
  flex: 25%;
  padding: 20px;}/* 在 992px 或更小的屏幕上，从四列变为两列 */@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }}/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }}

亲自试一试

用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素：

在小屏幕上我会隐藏。

实例

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }}

亲自试一试

用媒体查询改变字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

可变的字体大小。

实例

/* 如果屏幕尺寸超过 600 像素，把 <div> 的字体大小设置为 80 像素 */@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }}/* 如果屏幕大小为 600px 或更小，把 <div> 的字体大小设置为 30px */@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }}

亲自试一试

弹性图片库

在此例中，我们将媒体查询与 flexbox 一起使用来创建响应式图片库：

实例