CSS响应式布局的实现

/* 基本样式 */
.container {
  width: 100%;
  margin: 0 auto;
}
 
/* 媒体查询：当屏幕宽度小于或等于768px时，应用以下样式 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    margin: 0;
    padding: 10px;
  }
}
 
/* 媒体查询：当屏幕宽度在600px到768px之间时，应用以下样式 */
@media (min-width: 600px) and (max-width: 768px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}
 
/* 媒体查询：当屏幕宽度在480px到599px之间时，应用以下样式 */
@media (min-width: 480px) and (max-width: 599px) {
  .container {
    width: 60%;
    margin: 0 auto;
  }
}
 
/* 媒体查询：当屏幕宽度小于480px时，应用以下样式 */
@media (max-width: 480px) {
  .container {
    width: 100%;
    margin: 0;
    padding: 5px;
  }
}

这个例子展示了如何使用CSS媒体查询来创建一个响应式的布局容器。.container类定义了一个容器的基本样式，并且通过媒体查询根据屏幕宽度调整容器的宽度和内边距。这样，无论屏幕尺寸如何变化，.container类总是适应并提供一个良好的视觉和交互体验。