详解使用CSS3的@media来编写响应式的页面

下面是我对于使用CSS3的@media来编写响应式页面的详解攻略：

什么是响应式页面？

响应式页面是指能够在不同设备的屏幕尺寸下，自适应地展示最佳的页面效果，用户可以无论使用桌面电脑、笔记本、平板、手机等设备都能够方便地访问和使用网站。这种能够在不同尺寸设备上自适应的页面效果，需要通过CSS3中的@media规则进行控制。

@media规则的使用

在CSS3中，@media规则可以控制不同屏幕尺寸下应用的CSS样式表。使用@media规则，我们可以实现不同分辨率的设备或不同屏幕尺寸的设备，展现不同的页面效果，从而能够使用户在不同的场景下畅快使用网站。

@media规则语法如下所示：

@media 媒体类型 and (媒体特性) {
  /* CSS样式表 */
}

当媒体类型和媒体特性指定的条件符合时，下面定义的CSS样式表就会生效。比如我们可以这么编写一个@media样式规则：

@media all and (min-width: 768px) {
  .container {
    width: 90%;
  }
}

在这个样式规则中，当屏幕宽度大于或等于768px时，.container的宽度将会设置为90%。而这个样式规则只会在媒体类型为all（也就是所有设备）且屏幕宽度>=768px时起作用。

示例如何使用@media规则来编写响应式页面

假设我们现在有这么一个需求，在网页打开时，如果屏幕宽度小于992px，就把一个nav元素中的链接导航栏隐藏，当屏幕宽度超过992px时，又要重新显示这个链接导航栏。对于这个需求，我们可以这么写CSS样式表：

/* CSS样式表 for larger screens */
nav {
  display: block;
}

/* CSS样式表 for smaller screens */
@media screen and (max-width: 992px) {
  nav {
    display: none;
  }
}

在这段CSS样式表中，当屏幕最大宽度<=992px时，nav元素的样式会被重新定义为display:none;，从而使导航栏隐藏不显示。当屏幕最大宽度>992px时，又会将nav元素的样式定义为display:block;，这样就可以重新显示了。这样，我们就成功地编写了一个响应式页面，使得我们的页面可以在不同尺寸的设备上展现不同的效果。

下面再给一个更复杂的示例，以更好地说明如何使用CSS3中的@media规则编写响应式页面。

假设我们现在有这么一个需求，在不同设备的屏幕上，显示的内容和布局都要调整过来，而且需要将大图的宽度自适应地调整为屏幕宽度的80%。对于这个需求，我们可以这么写CSS样式表：

/* Base styles */
.container {
  width: 90%;
}

h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
}

.image {
  width: 100%;
  height: auto;
}

/* Styles for small devices */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  p {
    font-size: 16px;
  }

  .image {
    width: 80%;
    margin: 0 auto;
  }
}

/* Styles for medium devices */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  h1 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .image {
    width: 80%;
    margin: 0 auto;
  }
}

/* Styles for large devices */
@media screen and (min-width: 1024px) {
  .container {
    width: 80%;
  }

  h1 {
    font-size: 36px;
    margin-bottom: 30px;
  }

  p {
    font-size: 20px;
  }

  .image {
    width: 60%;
    margin: 0 20%;
  }
}

在这段CSS代码中，我们定义了三个媒体查询，它们分别适用于小、中、大三种不同尺寸的屏幕设备。在Base styles中，我们定义了一些基础样式，包括字体大小、图片宽度、.container的宽度等样式。在下面的@media规则中，我们定义了一些针对不同屏幕尺寸的样式规则，通过@media规则来控制不同设备上应用的CSS样式表。

在max-width为768px时，我们定义了一些小屏幕下的样式规则。在这个样式规则中，我们将h1的字体大小、margin-bottom等样式重新定义，将p的字体大小重新定义，将.image的宽度设置为80%。这样一来，在小屏幕设备上，页面字体大小会变小，图片宽度会自适应调整为80%。

在min-width为768px和max-width为1024px之间时，我们定义了一些中等屏幕下的样式规则。在这个样式规则中，我们将h1的字体大小重新定义、将.image的宽度设置为80%。这一样式规则告诉我们，当屏幕宽度在768px至1024px之间时，我们需要将H1字体大小变回原来尺寸，并将图片宽度设置为80%。

在min-width为1024px时，我们定义了一些大屏幕下的样式规则。在这个样式规则中，我们将.container的宽度设置为80%、将h1的字体大小重新定义、将p的字体大小重新定义、将.image的宽度设置为60%。这样一来，在大屏幕设备上，页面容器宽度会变为80%、H1字体大小会变大，而图片宽度会缩小至60%。

这就是CSS3中@media规则在响应式页面中的应用例子，通过这些示例，你能够更好地理解和学习@media规则在CSS布局中的作用和应用。