十、响应式设计最佳实践

10.1 移动优先策略

/* 移动优先工作流 */
/* 1. 先编写移动端样式 */
.element {
    padding: 10px;
    font-size: 14px;
}

/* 2. 使用 min-width 逐步增强 */
@media (min-width: 768px) {
    .element {
        padding: 20px;
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    .element {
        padding: 30px;
        font-size: 18px;
    }
}

/* 避免使用 max-width（桌面优先） */

10.2 性能优化

/* 1. 使用 will-change 优化动画 */
.animated {
    will-change: transform, opacity;
}

/* 2. 避免昂贵的属性动画 */
/* 避免 */
.element {
    transition: width 0.3s, height 0.3s;
}

/* 推荐 */
.element {
    transition: transform 0.3s, opacity 0.3s;
}

/* 3. 媒体查询合并 */
/* 避免分散 */
@media (max-width: 768px) {
    .nav { display: none; }
}
@media (max-width: 768px) {
    .footer { padding: 10px; }
}

/* 合并 */
@media (max-width: 768px) {
    .nav { display: none; }
    .footer { padding: 10px; }
}

/* 4. 图片优化 */
<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" loading="lazy" alt="图片">
</picture>

10.3 可访问性

/* 1. 焦点可见 */
:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 2. 跳过导航 */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

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

/* 4. 高对比度模式 */
@media (prefers-contrast: high) {
    .element {
        border: 2px solid currentColor;
    }
}

/* 5. 暗色模式 */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #f8f9fa;
    }

    .card {
        background: #2d2d2d;
        color: #f8f9fa;
    }
}

10.4 测试策略

<!-- 添加测试设备视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 测试工具 -->
<!-- Chrome DevTools 设备模拟 -->
<!-- 真实设备测试 -->
<!-- 在线测试工具：BrowserStack, Responsinator -->

<!-- 常见测试尺寸 -->
<!-- iPhone SE: 375x667 -->
<!-- iPhone 12/13: 390x844 -->
<!-- iPad: 768x1024 -->
<!-- iPad Pro: 1024x1366 -->
<!-- Desktop: 1280x720, 1920x1080 -->

十一、响应式框架

11.1 Bootstrap 5

<!-- 引入 Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap 响应式网格 -->
<div class="container">
    <div class="row g-4">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">卡片标题</h5>
                    <p class="card-text">卡片内容</p>
                </div>
            </div>
        </div>
        <!-- 更多卡片 -->
    </div>
</div>

<!-- Bootstrap 响应式工具类 -->
<div class="d-none d-md-block">只在桌面显示</div>
<div class="d-block d-md-none">只在移动显示</div>
<div class="text-center text-md-start">响应式文本对齐</div>

11.2 Tailwind CSS

<!-- 引入 Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Tailwind 响应式类 -->
<div class="
    w-full 
    md:w-1/2 
    lg:w-1/3 
    xl:w-1/4
    p-4
    text-center 
    md:text-left
">
    响应式内容
</div>

<!-- 响应式网格 -->
<div class="
    grid 
    grid-cols-1 
    sm:grid-cols-2 
    md:grid-cols-3 
    lg:grid-cols-4 
    gap-4
">
    <div class="bg-white p-4 rounded shadow">卡片1</div>
    <div class="bg-white p-4 rounded shadow">卡片2</div>
    <div class="bg-white p-4 rounded shadow">卡片3</div>
</div>

<!-- 响应式显示/隐藏 -->
<div class="block sm:hidden">移动端显示</div>
<div class="hidden sm:block">桌面端显示</div>

11.3 自定义响应式系统

/* 自定义响应式工具类 */
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* 容器 */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* 网格系统 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

[class*="col-"] {
    padding: 15px;
    box-sizing: border-box;
}

.col {
    flex: 1;
}

@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333%; max-width: 8.333%; }
    .col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; }
    .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

十二、响应式设计工具与调试

12.1 Chrome DevTools

// 设备模拟
// 1. 打开 DevTools (F12)
// 2. 点击设备模拟图标 (Toggle device toolbar)
// 3. 选择设备或自定义尺寸

// 远程调试
// Chrome: chrome://inspect
// Safari: 开发菜单 -> 选择设备

// 网络限速模拟
// DevTools -> Network -> Throttling

12.2 常用工具

<!-- 1. Viewport 测试器 -->
<!-- 在线工具：https://responsivedesignchecker.com/ -->

<!-- 2. 浏览器扩展 -->
<!-- Responsive Web Design Tester -->
<!-- Window Resizer -->

<!-- 3. 本地测试 -->
<!-- 使用 ngrok 进行外网测试 -->
<!-- ngrok http 3000 -->

<!-- 4. 性能测试 -->
<!-- Google PageSpeed Insights -->
<!-- Lighthouse -->
<!-- WebPageTest -->

响应式设计的道路充满挑战也充满乐趣，愿本文成为你构建响应式网站之路上的重要指南。持续学习，深入实践，你一定能创建出优秀的响应式网站！
来源：
https://ljtgc.cn/category/single-player.html