CSS 媒体查询 - 更多实例

让我们看看使用媒体查询的更多例子。

媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。

下面演示一个简单的例子，让我们来更改不同设备的背景色：

实例

/* 将 body 的背景色设置为棕褐色 */body {
  background-color: tan;}/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }}/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }}

亲自试一试

您想知道我们为什么要精确使用 992px 和 600px 吗？它们就是我们所称的设备的“典型断点”（typical breakpoints）。您可以在我们的 响应式 Web 设计教程 中学习有关典型断点的更多知识。

菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

实例

/* navbar 容器 */.topnav {
  overflow: hidden;
  background-color: #333;}/* Navbar 链接 */.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;}/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }}

亲自试一试

列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

实例

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