响应式, 移动端·

响应式设计完整指南

创建适配所有设备的现代化网站

响应式设计让网站在各种设备上都能提供良好的用户体验。本文介绍响应式设计的核心概念和实现方法。

什么是响应式设计

响应式设计是一种网页设计方法，使网站能够根据设备屏幕大小自动调整布局和显示方式。

视口设置

在 HTML 头部设置视口元标签：

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

流式布局

使用相对单位

/* 使用百分比 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 使用 em/rem */
.content {
  font-size: 1rem;
  padding: 1em;
}

/* 使用视口单位 */
.hero {
  height: 100vh;
  width: 100vw;
}

Flexbox 布局

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 300px;  /* 最小 300px，可以伸缩 */
}

Grid 布局

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

媒体查询

基本语法

/* 移动设备优先 */
.container {
  padding: 10px;
}

@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 30px;
  }
}

常用断点

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

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

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

/* 大屏 */
@media (min-width: 1440px) {
  /* 样式 */
}

响应式图片

<!-- 使用 srcset -->
<img
  src="small.jpg"
  srcset="small.jpg 300w,
          medium.jpg 600w,
          large.jpg 1200w"
  sizes="(max-width: 600px) 300px,
         (max-width: 1200px) 600px,
         1200px"
  alt="描述"
>

<!-- 使用 picture 元素 -->
<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="描述">
</picture>

响应式排版

流体字体

html {
  font-size: 100%; /* 16px */
}

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

p {
  font-size: clamp(1rem, 2vw, 1.125rem);
}

行高和间距

body {
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  line-height: 1.2;
  margin-bottom: 0.5em;
}

响应式导航

<nav class="navbar">
  <div class="logo">Logo</div>
  <button class="menu-toggle">☰</button>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 1rem;
}

.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 1rem;
  }

  .nav-links.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});

响应式表格

<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="名称">张三</td>
        <td data-label="邮箱">zhang@example.com</td>
        <td data-label="电话">123-456-7890</td>
        <td data-label="地址">北京市</td>
      </tr>
    </tbody>
  </table>
</div>

@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    padding: 0.75rem;
    text-align: left;
  }

  /* 卡片式表格 */
  tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }

  th {
    display: none;
  }

  td {
    display: block;
    border: none;
    position: relative;
    padding-left: 50%;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.5rem;
    font-weight: bold;
  }
}

响应式表单

.form-group {
  margin-bottom: 1rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .form-row {
    display: flex;
    gap: 1rem;
  }

  .form-row .form-group {
    flex: 1;
  }
}

图片和视频

响应式图片

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

响应式视频

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

测试工具

浏览器开发者工具

  • Chrome DevTools 设备模式
  • Firefox 响应式设计模式
  • Safari 检查器

在线测试工具

最佳实践

  1. 移动优先 - 从移动端开始设计
  2. 相对单位 - 使用 em、rem、%、vw、vh
  3. 灵活布局 - 使用 Flexbox 和 Grid
  4. 优化图片 - 使用响应式图片和现代格式
  5. 测试多设备 - 在不同设备上测试
  6. 渐进增强 - 从基础功能开始，逐步增强

学习资源

创建适配所有设备的响应式网站！

Web 安全最佳实践

保护你的网站和用户免受常见安全威胁