css3怎样做响应式布局

在 CSS3 中，响应式布局（Responsive Layout）通常是指：让页面能根据不同屏幕尺寸（手机、平板、桌面）自动调整结构和样式。常用手段主要有以下几种，实际项目中往往是组合使用。

一、核心基础：viewport 设置

响应式第一步，必须在 HTML 中加：

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

否则手机上会按 980px 宽度渲染，响应式失效。

二、媒体查询（Media Queries）⭐最常用

通过 @media 针对不同屏幕写样式。

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

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

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

常见断点参考：

• 手机：< 768px
• 平板：768–1024px
• 桌面：> 1024px

三、流式布局（百分比 / vw / vh）

用相对单位代替固定 px。

.box {
  width: 50%;        /* 相对于父元素 */
  height: 50vh;      /* 视口高度的一半 */
  font-size: 2vw;    /* 随视口宽度变化 */
}

四、Flexbox 响应式（非常实用）

Flex 很适合做“自动换行 + 自适应”。

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px; /* 最少200px，自动填充 */
}

屏幕小 → 自动变一列
屏幕大 → 自动变多列

五、Grid 响应式（现代方案）

CSS Grid 是响应式布局利器。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

含义：

• 自动计算列数
• 每列最小 200px
• 剩余空间平均分配

六、图片 / 媒体响应式

img {
  max-width: 100%;
  height: auto;
}

七、移动优先 vs 桌面优先

✅ 推荐：移动优先

/* 先写手机 */
.x { width: 100%; }

/* 再写大屏 */
@media (min-width: 768px) {
  .x { width: 50%; }
}

八、常见组合方案（实战）

• Flex + 媒体查询（导航、卡片）
• Grid + auto-fit（画廊、列表）
• 媒体查询控制显示/隐藏（PC菜单 vs 汉堡菜单）

九、简单示例

<div class="box">内容</div>

.box {
  width: 100%;
  padding: 20px;
  background: #f5f5f5;
}

@media (min-width: 768px) {
  .box {
    width: 50%;
    margin: auto;
  }
}

如果你愿意，我也可以：

• 帮你写一个 完整响应式页面模板
• 用 Flex / Grid 对比演示
• 针对 某个具体场景（如后台、官网、商城）给方案

你现在是想学原理，还是直接要代码？