← 返回目录

响应式设计：移动优先与媒体查询

进阶 · 第 7 篇 ·

什么是响应式设计

响应式设计让网页在不同屏幕尺寸下自动适配，从手机到桌面显示器都能提供良好的体验。核心理念：一套代码，多端适配。

视口设置

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

移动优先（Mobile First）

先写手机端样式，再用 min-width 媒体查询逐步增强到更大屏幕：

/* 基础样式 = 手机端 */
.container { padding: 1rem; }
.grid { display: grid; grid-template-columns: 1fr; }

/* 平板（≥768px） */
@media (min-width: 768px) {
  .container { padding: 2rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 桌面（≥1024px） */
@media (min-width: 1024px) {
  .container { max-width: 960px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

常用断点

/* 手机竖屏：默认（<640px） */
@media (min-width: 640px) { }   /* 手机横屏 / 小平板 */
@media (min-width: 768px) { }   /* 平板 */
@media (min-width: 1024px) { }  /* 小桌面 */
@media (min-width: 1280px) { }  /* 大桌面 */

流式布局技巧

/* 用 rem 代替 px */
html { font-size: 16px; }
h1 { font-size: 2rem; }

/* 用 clamp() 实现流式字号 */
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

/* 流式图片 */
img { max-width: 100%; height: auto; }

/* 响应式文字 */
body { font-size: clamp(14px, 1.5vw, 18px); }

实战：响应式导航栏

<style>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}
.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
}
.menu-btn { display: none; }

@media (max-width: 640px) {
  .menu-btn { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem;
  }
  .nav-links.open { display: flex; }
}
</style>

实战：响应式卡片网格

.card-grid {
  display: grid;
  gap: 1.5rem;
  padding: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
  }
}

小结

响应式设计的核心是移动优先 + 媒体查询 + 流式布局。先保证手机端体验，再逐步增强到平板和桌面。

下一篇：Web APIs 实战：Fetch、Storage 与 Geolocation