📚 第六章：响应式设计与媒体查询

6.1 响应式设计概述

6.1.1 什么是响应式设计

响应式设计是一种网页设计方法，使网站能够在不同设备和屏幕尺寸上提供最佳的用户体验。它通过灵活的布局、图像和 CSS 媒体查询来实现。

6.1.2 响应式设计的核心原则

1. 流式网格：使用相对单位而非固定像素
2. 弹性图像：图像能够缩放以适应容器
3. 媒体查询：根据设备特性应用不同的样式
4. 移动优先：从小屏幕开始设计，逐步增强

6.1.3 Tailwind CSS 的响应式方法

Tailwind CSS 采用移动优先的响应式设计方法，提供了五个默认断点：

断点前缀	最小宽度	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

6.2 Tailwind CSS 响应式语法

6.2.1 基本语法

<!-- 移动优先：默认小屏幕样式，然后添加大屏幕样式 -->
<div class="text-sm md:text-base lg:text-lg xl:text-xl">
    响应式文字大小
</div>

<!-- 布局响应式 -->
<div class="block md:flex lg:grid">
    <div class="w-full md:w-1/2 lg:w-1/3">
        响应式宽度
    </div>
</div>

6.2.2 响应式工具类示例

<!-- 响应式间距 -->
<div class="p-4 md:p-6 lg:p-8 xl:p-12">
    响应式内边距
</div>

<!-- 响应式颜色 -->
<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500">
    响应式背景色
</div>

<!-- 响应式显示/隐藏 -->
<div class="hidden md:block lg:hidden xl:block">
    在特定断点显示
</div>

6.3 布局响应式设计

6.3.1 响应式容器

<!-- 响应式最大宽度容器 -->
<div class="container mx-auto px-4">
    <div class="max-w-sm mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl">
        响应式容器内容
    </div>
</div>

<!-- 自定义响应式容器 -->
<div class="w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl mx-auto">
    多断点容器
</div>

6.3.2 响应式网格系统

<!-- 响应式列数 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
    <div class="bg-blue-100 p-4 rounded">项目 1</div>
    <div class="bg-green-100 p-4 rounded">项目 2</div>
    <div class="bg-red-100 p-4 rounded">项目 3</div>
    <div class="bg-yellow-100 p-4 rounded">项目 4</div>
    <div class="bg-purple-100 p-4 rounded">项目 5</div>
    <div class="bg-pink-100 p-4 rounded">项目 6</div>
</div>

<!-- 响应式网格跨度 -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
    <div class="col-span-2 md:col-span-2 lg:col-span-3 bg-blue-100 p-4 rounded">
        响应式跨度
    </div>
    <div class="col-span-2 md:col-span-2 lg:col-span-3 bg-green-100 p-4 rounded">
        响应式跨度
    </div>
</div>

6.3.3 响应式 Flexbox

<!-- 响应式 Flex 方向 -->
<div class="flex flex-col md:flex-row lg:flex-col xl:flex-row gap-4">
    <div class="flex-1 bg-blue-100 p-4 rounded">项目 1</div>
    <div class="flex-1 bg-green-100 p-4 rounded">项目 2</div>
    <div class="flex-1 bg-red-100 p-4 rounded">项目 3</div>
</div>

<!-- 响应式 Flex 对齐 -->
<div class="flex flex-col md:flex-row items-start md:items-center lg:items-end justify-start md:justify-center lg:justify-between">
    <div class="bg-blue-100 p-4 rounded mb-4 md:mb-0 md:mr-4 lg:mr-0">项目 1</div>
    <div class="bg-green-100 p-4 rounded mb-4 md:mb-0 md:mr-4 lg:mr-0">项目 2</div>
    <div class="bg-red-100 p-4 rounded">项目 3</div>
</div>

6.4 组件响应式设计

6.4.1 响应式导航栏

<nav class="bg-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-600 rounded"></div>
                </div>
                <div class="hidden md:block ml-4">
                    <span class="text-xl font-bold text-gray-900">品牌名</span>
                </div>
            </div>
            
            <!-- 桌面端导航 -->
            <div class="hidden md:flex items-center space-x-8">
                <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">产品</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">服务</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">关于</a>
                <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700">
                    联系我们
                </button>
            </div>
            
            <!-- 移动端菜单按钮 -->
            <div class="md:hidden flex items-center">
                <button class="text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div class="md:hidden">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-gray-50">
            <a href="#" class="text-gray-600 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">首页</a>
            <a href="#" class="text-gray-600 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">产品</a>
            <a href="#" class="text-gray-600 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">服务</a>
            <a href="#" class="text-gray-600 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">关于</a>
            <button class="w-full text-left bg-blue-600 text-white px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">
                联系我们
            </button>
        </div>
    </div>
</nav>

6.4.2 响应式卡片组件

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 卡片 1 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="h-48 sm:h-40 md:h-48 lg:h-40 xl:h-48 bg-gradient-to-r from-blue-400 to-blue-600"></div>
            <div class="p-4 sm:p-6">
                <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-2">响应式卡片</h3>
                <p class="text-gray-600 text-sm sm:text-base mb-4">
                    这是一个响应式卡片组件，在不同屏幕尺寸下会自动调整布局。
                </p>
                <button class="w-full sm:w-auto bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors duration-200">
                    了解更多
                </button>
            </div>
        </div>
        
        <!-- 重复更多卡片... -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="h-48 sm:h-40 md:h-48 lg:h-40 xl:h-48 bg-gradient-to-r from-green-400 to-green-600"></div>
            <div class="p-4 sm:p-6">
                <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-2">自适应设计</h3>
                <p class="text-gray-600 text-sm sm:text-base mb-4">
                    卡片会根据屏幕大小自动调整列数和间距，提供最佳的用户体验。
                </p>
                <button class="w-full sm:w-auto bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700 transition-colors duration-200">
                    了解更多
                </button>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="h-48 sm:h-40 md:h-48 lg:h-40 xl:h-48 bg-gradient-to-r from-purple-400 to-purple-600"></div>
            <div class="p-4 sm:p-6">
                <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-2">移动优先</h3>
                <p class="text-gray-600 text-sm sm:text-base mb-4">
                    采用移动优先的设计理念，确保在所有设备上都有良好的表现。
                </p>
                <button class="w-full sm:w-auto bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition-colors duration-200">
                    了解更多
                </button>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="h-48 sm:h-40 md:h-48 lg:h-40 xl:h-48 bg-gradient-to-r from-red-400 to-red-600"></div>
            <div class="p-4 sm:p-6">
                <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-2">灵活布局</h3>
                <p class="text-gray-600 text-sm sm:text-base mb-4">
                    灵活的网格系统让内容能够完美适应各种屏幕尺寸和设备类型。
                </p>
                <button class="w-full sm:w-auto bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700 transition-colors duration-200">
                    了解更多
                </button>
            </div>
        </div>
    </div>
</div>

6.4.3 响应式表单

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8 lg:p-12">
        <div class="text-center mb-8">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
                联系我们
            </h2>
            <p class="text-gray-600 text-sm sm:text-base lg:text-lg">
                有任何问题或建议，请随时与我们联系
            </p>
        </div>
        
        <form class="space-y-6">
            <!-- 姓名和邮箱 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                        姓名
                    </label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        class="w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入您的姓名"
                    >
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                        邮箱
                    </label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        class="w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入您的邮箱"
                    >
                </div>
            </div>
            
            <!-- 电话和公司 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                        电话
                    </label>
                    <input 
                        type="tel" 
                        id="phone" 
                        name="phone" 
                        class="w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入您的电话"
                    >
                </div>
                <div>
                    <label for="company" class="block text-sm font-medium text-gray-700 mb-2">
                        公司
                    </label>
                    <input 
                        type="text" 
                        id="company" 
                        name="company" 
                        class="w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="请输入您的公司名称"
                    >
                </div>
            </div>
            
            <!-- 主题 -->
            <div>
                <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
                    主题
                </label>
                <select 
                    id="subject" 
                    name="subject" 
                    class="w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                    <option value="">请选择咨询主题</option>
                    <option value="general">一般咨询</option>
                    <option value="support">技术支持</option>
                    <option value="sales">销售咨询</option>
                    <option value="partnership">合作洽谈</option>
                </select>
            </div>
            
            <!-- 消息 -->
            <div>
                <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
                    消息
                </label>
                <textarea 
                    id="message" 
                    name="message" 
                    rows="4" 
                    class="w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                    placeholder="请详细描述您的问题或需求..."
                ></textarea>
            </div>
            
            <!-- 提交按钮 -->
            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
                <div class="flex items-center">
                    <input 
                        type="checkbox" 
                        id="newsletter" 
                        name="newsletter" 
                        class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                    >
                    <label for="newsletter" class="ml-2 text-sm text-gray-600">
                        订阅我们的新闻通讯
                    </label>
                </div>
                <button 
                    type="submit" 
                    class="w-full sm:w-auto bg-blue-600 text-white px-6 py-3 sm:px-8 sm:py-3 rounded-md font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
                >
                    发送消息
                </button>
            </div>
        </form>
    </div>
</div>

6.5 图像和媒体响应式

6.5.1 响应式图像

<!-- 基础响应式图像 -->
<div class="w-full max-w-4xl mx-auto">
    <img 
        src="https://via.placeholder.com/800x400" 
        alt="响应式图像" 
        class="w-full h-auto rounded-lg shadow-lg"
    >
</div>

<!-- 不同断点的图像尺寸 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="w-full">
        <img 
            src="https://via.placeholder.com/400x300" 
            alt="图像 1" 
            class="w-full h-48 sm:h-56 md:h-48 lg:h-56 object-cover rounded-lg"
        >
    </div>
    <div class="w-full">
        <img 
            src="https://via.placeholder.com/400x300" 
            alt="图像 2" 
            class="w-full h-48 sm:h-56 md:h-48 lg:h-56 object-cover rounded-lg"
        >
    </div>
    <div class="w-full">
        <img 
            src="https://via.placeholder.com/400x300" 
            alt="图像 3" 
            class="w-full h-48 sm:h-56 md:h-48 lg:h-56 object-cover rounded-lg"
        >
    </div>
</div>

6.5.2 响应式视频

<!-- 响应式视频容器 -->
<div class="max-w-4xl mx-auto">
    <div class="relative w-full" style="padding-bottom: 56.25%; /* 16:9 宽高比 */">
        <iframe 
            class="absolute top-0 left-0 w-full h-full rounded-lg"
            src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="响应式视频"
            frameborder="0" 
            allowfullscreen
        ></iframe>
    </div>
</div>

<!-- 多个响应式视频 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <div class="relative w-full" style="padding-bottom: 56.25%;">
        <iframe 
            class="absolute top-0 left-0 w-full h-full rounded-lg"
            src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="视频 1"
            frameborder="0" 
            allowfullscreen
        ></iframe>
    </div>
    <div class="relative w-full" style="padding-bottom: 56.25%;">
        <iframe 
            class="absolute top-0 left-0 w-full h-full rounded-lg"
            src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="视频 2"
            frameborder="0" 
            allowfullscreen
        ></iframe>
    </div>
</div>

6.6 自定义断点

6.6.1 配置自定义断点

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
    },
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        'short': { 'raw': '(max-height: 600px)' },
      },
    },
  },
}

6.6.2 使用自定义断点

<!-- 使用自定义断点 -->
<div class="text-sm xs:text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl 3xl:text-5xl">
    多断点文字大小
</div>

<!-- 使用高度断点 -->
<div class="h-32 tall:h-64 short:h-16">
    基于高度的响应式
</div>

6.7 实践案例：响应式着陆页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式着陆页 - Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-blue-600 rounded mr-3"></div>
                    <span class="text-xl font-bold text-gray-900 hidden sm:block">TechCorp</span>
                </div>
                
                <!-- 桌面端导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">产品</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">解决方案</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">定价</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">关于</a>
                    <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                        开始试用
                    </button>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    
    <!-- 英雄区域 -->
    <section class="bg-gradient-to-r from-blue-600 to-purple-700 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
                <!-- 文字内容 -->
                <div class="text-center lg:text-left">
                    <h1 class="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight mb-6">
                        构建未来的
                        <span class="text-yellow-300">数字产品</span>
                    </h1>
                    <p class="text-lg sm:text-xl lg:text-2xl text-blue-100 mb-8 leading-relaxed">
                        使用我们的平台，快速构建、部署和扩展您的应用程序。让技术为您的业务赋能。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                        <button class="bg-white text-blue-600 px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors">
                            免费开始
                        </button>
                        <button class="border-2 border-white text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-600 transition-colors">
                            观看演示
                        </button>
                    </div>
                </div>
                
                <!-- 图像/插图 -->
                <div class="order-first lg:order-last">
                    <div class="relative">
                        <div class="w-full h-64 sm:h-80 lg:h-96 bg-white bg-opacity-10 rounded-2xl backdrop-blur-sm flex items-center justify-center">
                            <div class="text-center">
                                <div class="w-16 h-16 sm:w-20 sm:h-20 bg-white bg-opacity-20 rounded-full mx-auto mb-4 flex items-center justify-center">
                                    <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                </div>
                                <p class="text-lg sm:text-xl font-medium">产品演示</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 特性区域 -->
    <section class="py-12 sm:py-16 lg:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12 lg:mb-16">
                <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
                    为什么选择我们？
                </h2>
                <p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto">
                    我们提供全面的解决方案，帮助您的业务快速增长
                </p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
                <!-- 特性 1 -->
                <div class="bg-white p-6 lg:p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">快速部署</h3>
                    <p class="text-gray-600 leading-relaxed">
                        一键部署您的应用程序，无需复杂的配置和设置过程。
                    </p>
                </div>
                
                <!-- 特性 2 -->
                <div class="bg-white p-6 lg:p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">高可靠性</h3>
                    <p class="text-gray-600 leading-relaxed">
                        99.9% 的正常运行时间保证，让您的业务始终在线。
                    </p>
                </div>
                
                <!-- 特性 3 -->
                <div class="bg-white p-6 lg:p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">灵活定价</h3>
                    <p class="text-gray-600 leading-relaxed">
                        按需付费，只为您实际使用的资源付费，无隐藏费用。
                    </p>
                </div>
                
                <!-- 特性 4 -->
                <div class="bg-white p-6 lg:p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">企业级安全</h3>
                    <p class="text-gray-600 leading-relaxed">
                        多层安全防护，保护您的数据和应用程序免受威胁。
                    </p>
                </div>
                
                <!-- 特性 5 -->
                <div class="bg-white p-6 lg:p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">自动扩展</h3>
                    <p class="text-gray-600 leading-relaxed">
                        根据流量自动扩展资源，确保最佳性能和用户体验。
                    </p>
                </div>
                
                <!-- 特性 6 -->
                <div class="bg-white p-6 lg:p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">24/7 支持</h3>
                    <p class="text-gray-600 leading-relaxed">
                        专业的技术支持团队，随时为您解决问题和提供帮助。
                    </p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CTA 区域 -->
    <section class="bg-gray-900 text-white py-12 sm:py-16 lg:py-24">
        <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6">
                准备开始您的数字化转型之旅？
            </h2>
            <p class="text-lg sm:text-xl text-gray-300 mb-8 leading-relaxed">
                立即注册，享受 30 天免费试用，无需信用卡
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="bg-blue-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-semibold text-lg hover:bg-blue-700 transition-colors">
                    免费开始试用
                </button>
                <button class="border-2 border-gray-600 text-gray-300 px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-semibold text-lg hover:bg-gray-800 hover:border-gray-500 transition-colors">
                    联系销售团队
                </button>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 公司信息 -->
                <div class="sm:col-span-2 lg:col-span-1">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 bg-blue-600 rounded mr-3"></div>
                        <span class="text-xl font-bold text-gray-900">TechCorp</span>
                    </div>
                    <p class="text-gray-600 mb-4">
                        构建未来的数字产品，让技术为您的业务赋能。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-blue-600 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path>
                            </svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-blue-600 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"></path>
                            </svg>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-blue-600 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                </div>
                
                <!-- 产品链接 -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">产品</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">云主机</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">数据库</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">存储服务</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">CDN</a></li>
                    </ul>
                </div>
                
                <!-- 解决方案链接 -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">解决方案</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">电商平台</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">企业应用</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">移动应用</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">数据分析</a></li>
                    </ul>
                </div>
                
                <!-- 支持链接 -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">支持</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">文档</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">API 参考</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">社区</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">联系我们</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- 版权信息 -->
            <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col sm:flex-row justify-between items-center">
                <p class="text-gray-600 text-sm">
                    © 2024 TechCorp. 保留所有权利。
                </p>
                <div class="flex space-x-6 mt-4 sm:mt-0">
                    <a href="#" class="text-gray-600 hover:text-blue-600 text-sm transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 text-sm transition-colors">服务条款</a>
                    <a href="#" class="text-gray-600 hover:text-blue-600 text-sm transition-colors">Cookie 政策</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

6.8 响应式设计最佳实践

6.8.1 设计原则

1. 移动优先：从最小屏幕开始设计，逐步增强
2. 内容优先：确保核心内容在所有设备上都能良好展示
3. 触摸友好：确保按钮和链接有足够的点击区域
4. 性能优化：优化图像和资源加载

6.8.2 测试策略

• 多设备测试：在不同设备和屏幕尺寸上测试
• 浏览器兼容性：确保在主流浏览器中正常工作
• 性能测试：检查加载速度和响应时间
• 可访问性测试：确保符合无障碍访问标准

6.8.3 常见问题和解决方案

• 图像溢出：使用 max-w-full 和 h-auto
• 文字过小：确保最小字体大小为 16px
• 点击区域过小：按钮最小尺寸 44x44px
• 水平滚动：避免固定宽度，使用相对单位

6.9 本章总结

在本章中，我们深入学习了响应式设计和媒体查询：

核心要点

1. 响应式概念：理解响应式设计的核心原则
2. Tailwind 语法：掌握 Tailwind CSS 的响应式语法
3. 布局响应式：学会创建响应式布局和组件
4. 媒体响应式：处理图像和视频的响应式显示
5. 自定义断点：配置和使用自定义断点

最佳实践

• 采用移动优先的设计方法
• 确保内容在所有设备上都能良好展示
• 注意性能和可访问性
• 进行全面的测试

下一步

在下一章中，我们将学习组件化开发，了解如何创建可复用的 UI 组件。

6.10 练习题

1. 响应式导航练习：创建一个在移动端折叠、桌面端展开的导航栏
2. 响应式卡片练习：设计一个在不同屏幕尺寸下自动调整列数的卡片网格
3. 响应式表单练习：创建一个在移动端单列、桌面端多列的表单布局

练习提示

• 从移动端开始设计，逐步添加大屏幕样式
• 注意内容的可读性和可操作性
• 测试不同屏幕尺寸下的效果
• 考虑加载性能和用户体验