响应式设计完全指南：媒体查询与移动优先

响应式设计让网页在不同设备上都有良好的显示效果。

核心概念

1. 视口（Viewport）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 媒体查询

/* 默认样式（移动优先） */
.container {
  width: 100%;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

/* 大屏 */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

移动优先

/* 默认：移动端样式 */
.sidebar {
  display: none;
}

/* 平板以上：显示侧边栏 */
@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}

流式布局

/* 使用百分比 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 使用 vw/vh */
.hero {
  height: 100vh;
  font-size: 5vw;
}

/* 使用 clamp() */
.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Flexbox + Grid 响应式

/* Flexbox 自动换行 */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.grid > * {
  flex: 1 1 300px;
}

/* Grid 自动填充 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

常用断点

图片响应式

/* 基本响应式 */
img {
  max-width: 100%;
  height: auto;
}

/* 使用 srcset */
<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="响应式图片">

最佳实践

1. 移动优先：先设计移动端，再扩展到桌面
2. 使用相对单位：rem、em、vw、vh
3. 测试多设备：在不同设备上测试
4. 性能优化：移动端加载更少资源

总结

响应式设计是现代 Web 开发的基础。使用媒体查询、Flexbox、Grid，可以轻松实现响应式布局。