CSS响应式设计

CSS响应式设计是一种方式，通过创建可以响应不同屏幕尺寸的网页，提高用户体验。以下是一个简单的响应式设计实例：

/* 全局样式 */
body {
  font-family: Arial, sans-serif;
}
 
/* 基本布局 */
.container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
 
/* 响应式媒体查询 */
@media (min-width: 768px) {
  .container {
    width: 750px; /* 固定宽度 */
    margin: 0 auto; /* 水平居中 */
  }
}
 
@media (min-width: 992px) {
  .container {
    width: 970px; /* 固定宽度 */
  }
}
 
@media (min-width: 1200px) {
  .container {
    width: 1170px; /* 固定宽度 */
  }
}

这个样式表定义了一个.container类，它可以在不同屏幕尺寸下有不同的表现。当屏幕宽度小于768像素时，.container保持100%宽度，屏幕宽度介于768像素和992像素之间时，.container宽度固定为750像素并水平居中，屏幕宽度大于或等于1200像素时，.container宽度固定为1170像素。这样的设计可以保证内容在不同设备上的可读性和易用性。