CSS3媒体查询与页面自适应

/* 设置基本样式 */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
}
 
/* 媒体查询：当屏幕宽度小于或等于768像素时 */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  .container {
    width: 100%;
    margin: 0;
  }
  .header, .footer {
    text-align: center;
  }
  .header img, .footer img {
    width: 50%;
    margin: 10px auto;
  }
  .menu {
    position: static;
    border: none;
  }
  .menu li {
    display: inline;
    margin-right: 10px;
  }
}
 
/* 媒体查询：当屏幕宽度在600像素到768像素之间时 */
@media (min-width: 600px) and (max-width: 768px) {
  .header img, .footer img {
    width: 60%;
  }
}
 
/* 媒体查询：当屏幕宽度在480像素到599像素之间时 */
@media (min-width: 480px) and (max-width: 600px) {
  .menu li {
    margin-right: 5px;
  }
}
 
/* 容器样式 */
.container {
  width: 1200px;
  margin: 0 auto;
}
 
/* 头部样式 */
.header {
  text-align: right;
  margin-bottom: 10px;
}
 
/* 头部图片样式 */
.header img {
  width: 200px;
}
 
/* 菜单样式 */
.menu {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
  position: absolute;
  top: 100px;
  right: 0;
  border-left: 1px solid #ccc;
}
 
/* 菜单项样式 */
.menu li {
  display: inline-block;
  margin-right: 20px;
}
 
/* 底部样式 */
.footer {
  text-align: center;
  margin-top: 10px;
}
 
/* 底部图片样式 */
.footer img {
  width: 150px;
}

这段代码展示了如何使用CSS3媒体查询来实现一个简单的响应式设计，使得页面布局能够根据屏幕宽度的不同而自适应显示。通过定义不同的媒体查询条件，我们可以为不同的屏幕尺寸范围指定不同的CSS规则，从而实现页面内容的自适应显示。