知识库

Appearance

Return to top
On this page

CSS 响应式设计

响应式设计是一种使网页在不同设备和屏幕尺寸上都能良好显示的设计方法。

概述

响应式设计通过灵活的布局、图像和CSS媒体查询，使网页能够适应各种设备和屏幕尺寸。

视口设置

viewport meta 标签

在 HTML 中设置视口：

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

弹性布局单位

相对单位

css
/* em - 相对于父元素字体大小 */
.parent {
  font-size: 16px;
}
.child {
  width: 2em; /* 32px (2 × 16px) */
}

/* rem - 相对于根元素字体大小 */
.element {
  font-size: 1.5rem; /* 相对于根元素 */
}

/* % - 相对于父元素 */
.container {
  width: 100%;
}
.box {
  width: 50%; /* 相对于父容器 */
}

视口单位

css
/* vw - 视口宽度的百分比 */
.full-width {
  width: 100vw; /* 100% 视口宽度 */
}

/* vh - 视口高度的百分比 */
.full-height {
  height: 100vh; /* 100% 视口高度 */
}

/* vmin - 视口较小尺寸的百分比 */
.min-dimension {
  width: 50vmin;
  height: 50vmin;
}

/* vmax - 视口较大尺寸的百分比 */
.max-dimension {
  width: 50vmax;
}

弹性网格系统

基于百分比的网格

css
.grid-container {
  width: 100%;
}

.grid-item {
  float: left;
  width: 33.33%; /* 三列布局 */
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Flexbox 响应式布局

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

.flex-item {
  flex: 1 1 300px; /* grow shrink basis */
  min-width: 300px;
}

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}

CSS Grid 响应式布局

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

/* 固定列数响应式 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* 移动端单列 */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 平板两列 */
  }
}

@media (min-width: 1025px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 桌面端三列 */
  }
}

媒体查询

基本语法

css
/* 最小宽度 */
@media (min-width: 768px) {
  .element {
    font-size: 18px;
  }
}

/* 最大宽度 */
@media (max-width: 767px) {
  .element {
    font-size: 16px;
  }
}

/* 范围查询 */
@media (min-width: 768px) and (max-width: 1024px) {
  .element {
    font-size: 17px;
  }
}

/* 设备方向 */
@media (orientation: landscape) {
  .element {
    height: 50vh;
  }
}

@media (orientation: portrait) {
  .element {
    height: 80vh;
  }
}

常用断点

css
/* 移动设备 */
@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}

/* 平板设备 */
@media (min-width: 768px) and (max-width: 1024px) {
  .tablet-only {
    display: block;
  }
}

/* 桌面设备 */
@media (min-width: 1025px) {
  .desktop-only {
    display: block;
  }
}

/* 大屏幕 */
@media (min-width: 1200px) {
  .large-screen {
    font-size: 20px;
  }
}

弹性图片

基本响应式图片

css
.responsive-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 针对不同设备的图片 */
@media (max-width: 767px) {
  .image {
    background-image: url('image-mobile.jpg');
  }
}

@media (min-width: 768px) {
  .image {
    background-image: url('image-desktop.jpg');
  }
}

picture 元素

html
<picture>
  <source media="(max-width: 767px)" srcset="mobile.jpg">
  <source media="(max-width: 1024px)" srcset="tablet.jpg">
  <img src="desktop.jpg" alt="响应式图片">
</picture>

容器查询 (Container Queries)

基于容器的响应式设计

css
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
  
  .card img {
    width: 100px;
    height: 100px;
  }
}

响应式字体

流体排版

css
.fluid-text {
  /* 使用 clamp() 函数 */
  font-size: clamp(1rem, 2.5vw, 2rem);
  /* 最小值，首选值，最大值 */
}

/* 使用 calc() 计算 */
.adaptive-text {
  font-size: calc(16px + 0.5vw);
}

视口单位字体

css
.viewport-text {
  font-size: 4vw; /* 根据视口宽度调整 */
}

@media (max-width: 600px) {
  .viewport-text {
    font-size: 8vw; /* 在小屏幕上更大 */
  }
}

响应式导航

移动端友好导航

css
.nav-toggle {
  display: none;
}

.navigation {
  display: flex;
}

/* 移动端样式 */
@media (max-width: 767px) {
  .nav-toggle {
    display: block;
  }
  
  .navigation {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
  }
  
  .navigation.active {
    display: flex;
  }
}

响应式表格

水平滚动表格

css
.table-container {
  overflow-x: auto;
}

.responsive-table {
  min-width: 600px; /* 确保内容不被压缩 */
}

堆叠式表格

css
@media (max-width: 767px) {
  .stacked-table thead {
    display: none;
  }
  
  .stacked-table tr {
    display: block;
    margin-bottom: 10px;
  }
  
  .stacked-table td {
    display: block;
    text-align: left;
  }
  
  .stacked-table td::before {
    content: attr(data-label) ": ";
    font-weight: bold;
  }
}

设备特定样式

高分辨率屏幕

css
/* 高DPI屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .high-res-image {
    background-image: url('image@2x.jpg');
    background-size: 100px 100px; /* 实际显示尺寸 */
  }
}

打印样式

css
@media print {
  .no-print {
    display: none;
  }
  
  .print-only {
    display: block;
  }
  
  body {
    font-size: 12pt;
  }
}

可访问性考虑

用户偏好

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

/* 高对比度偏好 */
@media (prefers-contrast: high) {
  .element {
    border: 2px solid #000;
  }
}

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

实用技巧

响应式边距和填充

css
.responsive-spacing {
  padding: 1rem;
}

@media (min-width: 768px) {
  .responsive-spacing {
    padding: 2rem;
  }
}

隐藏/显示元素

css
.show-mobile {
  display: none;
}

.show-desktop {
  display: block;
}

@media (max-width: 767px) {
  .show-mobile {
    display: block;
  }
  
  .show-desktop {
    display: none;
  }
}

响应式溢出处理

css
.overflow-container {
  overflow-x: auto;
}

@media (min-width: 768px) {
  .overflow-container {
    overflow-x: visible;
  }
}

性能优化

避免复杂的媒体查询

css
/* 推荐：简单直接的断点 */
@media (max-width: 768px) {
  .element {
    width: 100%;
  }
}

/* 避免：过于复杂的嵌套 */
@media (min-width: 576px) and (max-width: 768px) and (orientation: portrait) {
  /* 过于复杂的条件 */
}

使用现代CSS特性

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

最佳实践

  • 移动优先设计，从小屏幕开始逐步增强
  • 使用相对单位而非固定像素值
  • 合理设置断点，不要过多或过少
  • 测试在不同设备和屏幕尺寸上的表现
  • 考虑用户的可访问性偏好
  • 优化图片和媒体资源
  • 保持性能和用户体验的平衡
  • 使用现代CSS特性如Grid和Flexbox