响应式设计

第4章：响应式设计

4.1 响应式设计基础

响应式设计是现代Web开发的核心概念，它确保网站在不同设备和屏幕尺寸上都能提供良好的用户体验。

4.1.1 视口设置

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

4.1.2 响应式设计原则

• 流动网格：使用百分比而非固定像素
• 弹性图片：图片随容器缩放
• 媒体查询：根据设备特性应用不同样式

4.2 媒体查询

4.2.1 基本语法

@media media-type and (media-feature) {
  /* CSS规则 */
}

4.2.2 常用断点

/* 移动设备 */
@media (max-width: 767px) {
  /* 手机样式 */
}

/* 平板设备 */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 平板样式 */
}

/* 桌面设备 */
@media (min-width: 1024px) {
  /* 桌面样式 */
}

4.2.3 现代断点策略

/* 移动优先策略 */
.container {
  /* 移动端基础样式 */
}

@media (min-width: 640px) {
  .container {
    /* 小屏幕平板 */
  }
}

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

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

@media (min-width: 1280px) {
  .container {
    /* 大桌面 */
  }
}

4.3 响应式单位

4.3.1 相对单位

.container {
  width: 100%;        /* 百分比 */
  font-size: 1rem;    /* 根元素字体大小 */
  padding: 1em;       /* 当前元素字体大小 */
  line-height: 1.5;   /* 无单位，相对字体大小 */
}

4.3.2 视口单位

.header {
  height: 100vh;      /* 视口高度 */
  width: 100vw;       /* 视口宽度 */
  font-size: 5vmin;   /* 视口最小尺寸的5% */
  padding: 2vmax;     /* 视口最大尺寸的2% */
}

4.3.3 现代CSS函数

.container {
  width: clamp(300px, 50%, 800px); /* 最小值、首选值、最大值 */
  font-size: min(4vw, 24px);       /* 取较小值 */
  margin: max(2rem, 10vh);         /* 取较大值 */
}

4.4 响应式布局模式

4.4.1 流动布局

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

4.4.2 列折叠

.multi-column {
  column-count: 3;
  column-gap: 2rem;
}

@media (max-width: 1024px) {
  .multi-column {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .multi-column {
    column-count: 1;
  }
}

4.4.3 隐藏和显示

.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

4.5 响应式图片

4.5.1 srcset 和 sizes

<img 
  src="image-small.jpg"
  srcset="image-small.jpg 400w,
          image-medium.jpg 800w,
          image-large.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="响应式图片示例"
>

4.5.2 picture 元素

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

4.5.3 CSS 图片响应式

.responsive-image {
  max-width: 100%;
  height: auto;
  object-fit: cover; /* 保持比例填充容器 */
}

4.6 移动优先设计

4.6.1 移动优先策略

/* 基础样式 - 移动设备 */
.component {
  padding: 1rem;
  font-size: 1rem;
}

/* 平板设备增强 */
@media (min-width: 768px) {
  .component {
    padding: 2rem;
    font-size: 1.1rem;
  }
}

/* 桌面设备增强 */
@media (min-width: 1024px) {
  .component {
    padding: 3rem;
    font-size: 1.2rem;
  }
}

4.6.2 渐进增强

/* 基础功能 */
.button {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
}

/* 增强体验 */
@media (hover: hover) {
  .button:hover {
    background: #0056b3;
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: all 0.3s ease;
  }
}

4.7 高级响应式技术

4.7.1 容器查询

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

4.7.2 prefers-* 媒体特性

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: white;
  }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 高对比度 */
@media (prefers-contrast: high) {
  .text {
    color: #000;
    background: #fff;
  }
}

4.7.3 环境变量

.safe-area {
  padding: env(safe-area-inset-top) 
           env(safe-area-inset-right) 
           env(safe-area-inset-bottom) 
           env(safe-area-inset-left);
}

4.8 性能优化

4.8.1 条件加载

/* 只在需要时加载大图片 */
.hero-image {
  background-image: url('image-small.jpg');
}

@media (min-width: 768px) and (min-resolution: 2dppx) {
  .hero-image {
    background-image: url('image-large.jpg');
  }
}

4.8.2 字体优化

/* 系统字体栈 */
.system-fonts {
  font-family: -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, sans-serif;
}

/* 响应式字体大小 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

4.9 测试和调试

4.9.1 开发工具

• Chrome DevTools 设备模拟
• Firefox 响应式设计模式
• 真实设备测试

4.9.2 断点调试

/* 调试断点 */
.debug::before {
  content: "移动端";
}

@media (min-width: 768px) {
  .debug::before {
    content: "平板";
  }
}

@media (min-width: 1024px) {
  .debug::before {
    content: "桌面";
  }
}

4.10 总结

响应式设计是现代Web开发的必备技能。通过媒体查询、流动布局、响应式图片等技术，可以创建在各种设备上都能良好工作的网站。移动优先策略和渐进增强原则确保了最佳的用户体验。