Klein's-blue的博客

记录生活，分享技术

0%

尺寸与响应式

CSS 尺寸与响应式（2025-2026 主流实用版）

重点：媒体查询、断点策略、流式布局、视口单位、容器查询、响应式图片/视频
目标：写出移动优先、维护性好、性能友好的响应式页面

1. 媒体查询（Media Queries）核心用法

1.1 移动优先（Mobile First）写法 —— 目前最推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 基础样式（默认移动端） */
.container {
  padding: 1rem;
  font-size: 1rem;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }
}

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

/* 超大屏（可选） */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

1.2 2025-2026 主流断点策略推荐（Tailwind / 大厂常用）

设备/场景 常用断点（min-width） Tailwind 对应 建议用途
手机 —（默认） — 基础样式
平板竖屏/小桌面 640px / 768px sm / md 两列布局开始
桌面 1024px / 1200px lg / xl 三列/内容区域变宽
大桌面/电视 1280px / 1536px 2xl 超宽布局、展示型页面

最常用折中方案（强烈推荐）：

1
2
3
4
@media (min-width: 640px)  { ... }  /* sm  */
@media (min-width: 768px)  { ... }  /* md  */
@media (min-width: 1024px) { ... }  /* lg  */
@media (min-width: 1280px) { ... }  /* xl  */

2. 流式布局 + 视口单位（最核心的响应式手段）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 推荐：流体宽度 + 最大/最小约束 */
.container {
  width: 100%;
  max-width: 1200px;           /* 防止过宽 */
  min-width: 320px;            /* 防止过窄 */
  margin: 0 auto;
}

/* 非常推荐的流体排版（2025-2026 流行） */
html {
  font-size: clamp(14px, 2.5vw + 0.5rem, 18px);
  /* 最小14px，推荐跟随视口，最大18px */
}

h1 {
  font-size: clamp(1.8rem, 5vw + 1rem, 4rem);
}

常用视口单位对比表:

单位 含义 优点 缺点/注意点 推荐场景
vw 视口宽度 1% 真正全屏响应 键盘弹出/滚动条会影响 大标题、横幅、Hero
vh 视口高度 1% 适合全屏模块 移动端浏览器工具栏问题严重 全屏轮播、首屏高度
vmin vw/vh 中较小值 保持比例（正方形常用） — 头像、正方形卡片
vmax vw/vh 中较大值 — 很少用 —
% 相对父元素 稳定、可预测 需要父元素有明确尺寸 布局、padding、margin

3. 容器查询（Container Queries）—— 2024年后逐渐成为主流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 声明容器 */
.card-list {
  container-type: inline-size;    /* 或 size */
  container-name: cardlist;       /* 可选，命名容器 */
}

/* 根据容器宽度而不是视口宽度改变样式 */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

@container cardlist (min-width: 720px) {
  .card {
    max-width: 45%;
  }
}

4. 响应式图片与视频最佳实践

4.1 图片响应式核心技巧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 推荐写法（2025-2026 标配） -->
<img 
  src="low-res.jpg" 
  srcset="
    low-res.jpg 320w,
    mid-res.jpg 640w,
    high-res.jpg 1024w,
    ultra-high.jpg 1600w
  " 
  sizes="(max-width: 480px) 100vw,
         (max-width: 768px) 50vw,
         33vw"
  alt="描述"
  loading="lazy"
  decoding="async"
>

4.2 常用 object-fit 组合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 最常用，填满容器，裁剪多余 */
  object-position: center;
}

.contain-img {
  object-fit: contain;        /* 完整显示，可能留白 */
}

.fill-img {
  object-fit: fill;           /* 拉伸填满（少用） */
}

4.3 响应式视频

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;         /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 视频也可用 */
}