下面是一个简单的CSS3多媒体查询实例，用于创建一个基本的响应式布局。在这个示例中，根据不同的屏幕宽度，我们调整了字体大小和页面的布局结构：
/* 默认样式 */
body {
  font-size: 16px;
  margin: 20px;
}

/* 媒体查询：如果屏幕宽度小于等于600像素，则调整样式 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  header {
    text-align: center;
  }

  main {
    flex-direction: column;
  }
}

/* 媒体查询：如果屏幕宽度在601到900像素之间，则调整样式 */
@media (min-width: 601px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }

  header {
    font-size: 24px;
  }
}

/* 媒体查询：如果屏幕宽度大于900像素，则调整样式 */
@media (min-width: 901px) {
  body {
    font-size: 20px;
  }
}

在这个示例中，我们使用了三个不同的媒体查询，分别根据不同的屏幕宽度应用不同的样式：

1. 如果屏幕宽度小于等于600像素，调整字体大小、标题居中、主内容垂直布局。
2. 如果屏幕宽度在601到900像素之间，再次调整字体大小、增大标题字体大小。
3. 如果屏幕宽度大于900像素，再次调整字体大小。

这个示例演示了如何使用媒体查询根据不同的屏幕尺寸应用不同的样式，以实现响应式布局。这样可以确保网站在不同设备上以最佳方式呈现。


转载请注明出处：http://www.zyzy.cn/article/detail/4075/CSS