CSS响应式设计入门指南：从基础概念到实战技巧，轻松掌握让网页在手机平板电脑上完美呈现的秘诀，解决布局错乱图片变形等常见问题，立即开始你的前端优化之旅

什么是响应式设计？为什么它如此重要？

响应式网页设计（Responsive Web Design, RWD）是一种让网页能够自动适应不同设备屏幕尺寸的设计方法。简单来说，就是让你的网站在手机、平板、笔记本电脑和大屏幕显示器上都能完美呈现，提供最佳的用户体验。

在移动设备使用率持续增长的今天，响应式设计已经成为现代网页开发的标准配置。根据最新的统计数据，全球超过50%的网络流量来自移动设备，这意味着如果你的网站不能在小屏幕上正常工作，你将失去大量的潜在用户和客户。

响应式设计的核心优势

单一代码库：只需维护一套代码，就能服务所有设备
更好的SEO表现：Google优先推荐移动友好的网站
提升用户体验：无论用户使用什么设备，都能获得一致的体验
降低开发成本：不需要为不同设备开发独立的版本

响应式设计的基础概念

1. 视口（Viewport）设置

视口是用户在设备上看到的网页区域。在响应式设计中，正确设置视口是第一步。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式网站示例</title> </head> <body> <!-- 页面内容 --> </body> </html>

关键点说明：

width=device-width：设置视口宽度等于设备屏幕宽度
initial-scale=1.0：设置初始缩放比例为1.0（不缩放）
这个meta标签必须放在<head>标签内，且必须在任何CSS文件之前

2. 弹性网格布局（Fluid Grids）

弹性网格使用相对单位（如百分比）而不是固定单位（如像素）来定义布局。

/* 传统固定布局 - 不推荐 */ .container { width: 960px; margin: 0 auto; } /* 弹性网格布局 - 推荐 */ .container { width: 90%; /* 占父容器宽度的90% */ max-width: 1200px; /* 最大宽度限制 */ margin: 0 auto; } /* 栅格系统示例 */ .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .col { padding: 15px; flex: 1 0 0%; /* 弹性伸缩 */ } /* 响应式栅格 */ @media (min-width: 768px) { .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } }

3. 弹性图片（Flexible Images）

图片需要能够随着容器大小变化而缩放，同时保持比例。

/* 基础弹性图片 */ img { max-width: 100%; height: auto; display: block; } /* 背景图片响应式处理 */ .hero-section { background-image: url('hero.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 400px; } /* 针对不同屏幕的背景图片优化 */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .hero-section { background-image: url('hero@2x.jpg'); } } /* 现代响应式图片解决方案 */ picture { width: 100%; } picture img { width: 100%; height: auto; } /* 使用picture元素为不同设备提供不同图片 */ <picture> <source media="(min-width: 1200px)" srcset="large.jpg"> <source media="(min-width: 768px)" srcset="medium.jpg"> <source media="(max-width: 767px)" srcset="small.jpg"> <img src="fallback.jpg" alt="描述文本"> </picture>

4. 媒体查询（Media Queries）

媒体查询是响应式设计的核心技术，它允许我们根据设备特性应用不同的CSS样式。

/* 移动优先的CSS策略 */ /* 1. 默认样式（移动设备） */ body { font-size: 16px; line-height: 1.5; padding: 10px; } .container { width: 100%; padding: 0 15px; } .nav-menu { display: none; /* 移动端默认隐藏桌面菜单 */ } .hamburger { display: block; /* 显示汉堡菜单 */ } /* 2. 平板设备（768px及以上） */ @media (min-width: 768px) { body { font-size: 18px; padding: 20px; } .container { max-width: 720px; margin: 0 auto; } .nav-menu { display: flex; /* 显示导航菜单 */ gap: 20px; } .hamburger { display: none; /* 隐藏汉堡菜单 */ } } /* 3. 桌面设备（992px及以上） */ @media (min-width: 992px) { body { font-size: 20px; padding: 30px; } .container { max-width: 960px; } .nav-menu { gap: 30px; } } /* 4. 大屏幕设备（1200px及以上） */ @media (min-width: 1200px) { .container { max-width: 1140px; } } /* 5. 超大屏幕设备（1400px及以上） */ @media (min-width: 1400px) { .container { max-width: 1320px; } }

响应式设计的高级技巧

1. CSS Grid布局

CSS Grid是现代响应式布局的强大工具。

/* 网格容器 */ .grid-container { display: grid; grid-template-columns: 1fr; /* 移动端单列 */ gap: 20px; padding: 20px; } /* 平板设备 */ @media (min-width: 768px) { .grid-container { grid-template-columns: repeat(2, 1fr); /* 双列布局 */ } } /* 桌面设备 */ @media (min-width: 1024px) { .grid-container { grid-template-columns: repeat(3, 1fr); /* 三列布局 */ } } /* 复杂的响应式网格 */ .complex-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; gap: 15px; } @media (min-width: 768px) { .complex-grid { grid-template-columns: 2fr 1fr; grid-template-areas: "header header" "main sidebar" "footer footer"; } } /* 使用minmax()函数 */ .responsive-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }

2. Flexbox弹性盒子

Flexbox在响应式设计中也非常有用，特别是在一维布局方面。

/* 导航栏示例 */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: #333; color: white; } /* 移动端：垂直堆叠 */ .nav-links { display: flex; flex-direction: column; gap: 10px; width: 100%; } /* 桌面端：水平排列 */ @media (min-width: 768px) { .nav-links { flex-direction: row; gap: 20px; width: auto; } } /* 卡片布局 */ .card-container { display: flex; flex-wrap: wrap; gap: 20px; } .card { flex: 1 1 300px; /* 最小300px，可以伸缩 */ background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 20px; } /* 等宽列布局 */ .equal-columns { display: flex; gap: 20px; } .equal-columns > * { flex: 1; }

3. 响应式排版

/* 使用clamp()函数实现流体排版 */ h1 { font-size: clamp(2rem, 5vw, 3.5rem); /* 最小值：2rem，首选值：5vw，最大值：3.5rem */ } p { font-size: clamp(1rem, 2.5vw, 1.25rem); line-height: 1.6; } /* 使用CSS变量管理断点 */ :root { --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; } /* 使用这些变量 */ @media (min-width: var(--breakpoint-md)) { /* 平板样式 */ } /* 响应式间距 */ .section { padding: clamp(1rem, 3vw, 3rem); } /* 响应式文字大小 */ .text-responsive { font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1200 - 320))); }

解决常见问题

1. 布局错乱问题

问题：元素在不同屏幕尺寸下位置错乱或重叠。

解决方案：

/* 问题代码 */ .container { width: 1000px; /* 固定宽度 */ margin: 0 auto; } /* 解决方案 */ .container { width: 100%; max-width: 1000px; /* 限制最大宽度 */ margin: 0 auto; padding: 0 15px; /* 添加内边距防止内容贴边 */ } /* 使用box-sizing重置 */ * { box-sizing: border-box; } /* 清除浮动 */ .clearfix::after { content: ""; display: table; clear: both; } /* 防止元素溢出 */ .overflow-hidden { overflow-x: hidden; /* 防止横向滚动 */ }

2. 图片变形问题

问题：图片在不同尺寸下被拉伸或压缩变形。

解决方案：

/* 基础解决方案 */ img { max-width: 100%; height: auto; } /* 针对背景图片 */ .background-container { width: 100%; height: 300px; background-image: url('image.jpg'); background-size: cover; /* 保持比例填充 */ background-position: center; /* 居中显示 */ background-repeat: no-repeat; } /* 使用object-fit（现代浏览器） */ .responsive-image { width: 100%; height: 200px; object-fit: cover; /* 保持比例填充 */ object-position: center; } /* 保持比例的容器 */ .aspect-ratio-container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 比例 */ } .aspect-ratio-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

3. 导航菜单问题

问题：桌面端的复杂导航在移动端无法使用。

解决方案：

<!-- HTML结构 --> <nav class="navbar"> <div class="nav-brand">Logo</div> <button class="hamburger" id="hamburger">☰</button> <ul class="nav-menu" id="navMenu"> <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; background: #333; color: white; } .hamburger { display: block; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0.5rem; } .nav-menu { display: none; /* 默认隐藏 */ position: absolute; top: 100%; left: 0; width: 100%; background: #444; list-style: none; margin: 0; padding: 0; } .nav-menu.active { display: block; /* 激活时显示 */ } .nav-menu li { border-bottom: 1px solid #555; } .nav-menu li a { display: block; padding: 1rem; color: white; text-decoration: none; } /* 桌面端样式 */ @media (min-width: 768px) { .hamburger { display: none; /* 隐藏汉堡按钮 */ } .nav-menu { display: flex !important; /* 强制显示 */ position: static; width: auto; background: transparent; gap: 20px; } .nav-menu li { border: none; } .nav-menu li a { padding: 0.5rem 1rem; } }

// JavaScript交互 document.getElementById('hamburger').addEventListener('click', function() { const menu = document.getElementById('navMenu'); menu.classList.toggle('active'); });

4. 表单元素问题

问题：表单在小屏幕上输入框太小，按钮难以点击。

解决方案：

/* 响应式表单 */ .form-group { margin-bottom: 1rem; } .form-control { width: 100%; padding: 12px; font-size: 16px; /* 至少16px防止iOS缩放 */ border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } /* 移动端优化 */ @media (max-width: 767px) { .form-control { padding: 16px; /* 更大的点击区域 */ font-size: 18px; /* 更大的字体 */ } /* 按钮优化 */ .btn { width: 100%; padding: 16px; font-size: 18px; margin-bottom: 10px; } } /* 桌面端优化 */ @media (min-width: 768px) { .form-row { display: flex; gap: 15px; } .form-row .form-group { flex: 1; } }

5. 表格响应式处理

问题：表格在小屏幕上显示不全，出现横向滚动条。

解决方案：

/* 方法1：横向滚动 */ .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */ } table { min-width: 600px; /* 保持最小宽度 */ width: 100%; } /* 方法2：堆叠式表格（移动端） */ @media (max-width: 767px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; margin-bottom: 10px; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td::before { position: absolute; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; font-weight: bold; content: attr(data-label); } }

<!-- 堆叠式表格HTML --> <table> <thead> <tr> <th>姓名</th> <th>职位</th> <th>部门</th> </tr> </thead> <tbody> <tr> <td data-label="姓名">张三</td> <td data-label="职位">前端工程师</td> <td data-label="部门">技术部</td> </tr> </tbody> </table>

实战项目：创建一个完整的响应式页面

让我们通过一个实际的例子来整合所有概念。

HTML结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式网站示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 导航栏 --> <nav class="navbar"> <div class="container"> <div class="nav-brand">MySite</div> <button class="hamburger" id="hamburger" aria-label="菜单">☰</button> <ul class="nav-menu" id="navMenu"> <li><a href="#home">首页</a></li> <li><a href="#features">特性</a></li> <li><a href="#pricing">价格</a></li> <li><a href="#contact">联系</a></li> </ul> </div> </nav> <!-- 英雄区域 --> <header class="hero" id="home"> <div class="container"> <h1>欢迎来到响应式世界</h1> <p>让您的网站在任何设备上都完美呈现</p> <a href="#features" class="btn btn-primary">了解更多</a> </div> </header> <!-- 特性区域 --> <section class="features" id="features"> <div class="container"> <h2>核心特性</h2> <div class="grid-container"> <div class="feature-card"> <h3>移动优先</h3> <p>从小屏幕开始设计，确保最佳的移动体验。</p> </div> <div class="feature-card"> <h3>弹性布局</h3> <p>使用现代CSS技术创建灵活的布局系统。</p> </div> <div class="feature-card"> <h3>快速加载</h3> <p>优化的图片和代码，提供极速加载体验。</p> </div> </div> </div> </section> <!-- 价格区域 --> <section class="pricing" id="pricing"> <div class="container"> <h2>价格方案</h2> <div class="pricing-grid"> <div class="pricing-card"> <h3>基础版</h3> <div class="price">¥99<span>/月</span></div> <ul> <li>响应式设计</li> <li>基础SEO</li> <li>邮件支持</li> </ul> <button class="btn">选择方案</button> </div> <div class="pricing-card featured"> <h3>专业版</h3> <div class="price">¥299<span>/月</span></div> <ul> <li>所有基础功能</li> <li>高级SEO</li> <li>优先支持</li> <li>自定义域名</li> </ul> <button class="btn btn-primary">选择方案</button> </div> <div class="pricing-card"> <h3>企业版</h3> <div class="price">¥999<span>/月</span></div> <ul> <li>所有专业功能</li> <li>专属顾问</li> <li>24/7支持</li> <li>定制开发</li> </ul> <button class="btn">选择方案</button> </div> </div> </div> </section> <!-- 联系表单 --> <section class="contact" id="contact"> <div class="container"> <h2>联系我们</h2> <form class="contact-form"> <div class="form-row"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" class="form-control" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" id="email" class="form-control" required> </div> </div> <div class="form-group"> <label for="message">留言</label> <textarea id="message" class="form-control" rows="5" required></textarea> </div> <button type="submit" class="btn btn-primary">发送消息</button> </form> </div> </section> <!-- 页脚 --> <footer class="footer"> <div class="container"> <p>&copy; 2024 MySite. All rights reserved.</p> </div> </footer> <script src="script.js"></script> </body> </html>

CSS样式

/* CSS Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; } /* Container */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* Navigation */ .navbar { background: #2c3e50; color: white; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .navbar .container { display: flex; justify-content: space-between; align-items: center; padding: 15px; } .nav-brand { font-size: 1.5rem; font-weight: bold; } .hamburger { display: block; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; } .nav-menu { display: none; list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; width: 100%; background: #34495e; } .nav-menu.active { display: block; } .nav-menu li { border-bottom: 1px solid #4a5f7f; } .nav-menu li:last-child { border-bottom: none; } .nav-menu li a { display: block; padding: 12px 15px; color: white; text-decoration: none; transition: background 0.3s; } .nav-menu li a:hover { background: #3d5266; } /* Hero Section */ .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 60px 0; } .hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 15px; font-weight: bold; } .hero p { font-size: clamp(1rem, 2.5vw, 1.25rem); margin-bottom: 25px; opacity: 0.9; } /* Buttons */ .btn { display: inline-block; padding: 12px 24px; background: #34495e; color: white; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; font-size: 1rem; transition: all 0.3s; text-align: center; } .btn:hover { background: #2c3e50; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-primary { background: #e74c3c; } .btn-primary:hover { background: #c0392b; } /* Features Section */ .features { padding: 60px 0; background: white; } .features h2, .pricing h2, .contact h2 { text-align: center; margin-bottom: 40px; font-size: clamp(1.5rem, 4vw, 2rem); color: #2c3e50; } .grid-container { display: grid; grid-template-columns: 1fr; gap: 20px; } .feature-card { background: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 4px solid #667eea; transition: transform 0.3s; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .feature-card h3 { margin-bottom: 10px; color: #2c3e50; } /* Pricing Section */ .pricing { padding: 60px 0; background: #f8f9fa; } .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .pricing-card { background: white; padding: 30px; border-radius: 8px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s; } .pricing-card:hover { transform: translateY(-5px); } .pricing-card.featured { border: 2px solid #e74c3c; position: relative; } .pricing-card.featured::before { content: "推荐"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #e74c3c; color: white; padding: 3px 15px; border-radius: 15px; font-size: 0.8rem; } .pricing-card h3 { margin-bottom: 15px; color: #2c3e50; } .price { font-size: 2.5rem; font-weight: bold; color: #e74c3c; margin-bottom: 20px; } .price span { font-size: 1rem; color: #666; } .pricing-card ul { list-style: none; margin: 20px 0; text-align: left; } .pricing-card ul li { padding: 8px 0; border-bottom: 1px solid #eee; } .pricing-card ul li:last-child { border-bottom: none; } /* Contact Section */ .contact { padding: 60px 0; background: white; } .contact-form { max-width: 600px; margin: 0 auto; } .form-row { display: flex; gap: 15px; margin-bottom: 15px; } .form-group { flex: 1; margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: #2c3e50; } .form-control { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; transition: border-color 0.3s; } .form-control:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } textarea.form-control { resize: vertical; min-height: 100px; } /* Footer */ .footer { background: #2c3e50; color: white; text-align: center; padding: 20px 0; } /* Media Queries */ /* Tablet (768px and up) */ @media (min-width: 768px) { .hamburger { display: none; } .nav-menu { display: flex !important; position: static; width: auto; background: transparent; gap: 20px; } .nav-menu li { border: none; } .nav-menu li a { padding: 8px 12px; border-radius: 4px; } .nav-menu li a:hover { background: rgba(255,255,255,0.1); } .hero { padding: 80px 0; } .grid-container { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: repeat(2, 1fr); } .form-row { flex-direction: row; } } /* Desktop (992px and up) */ @media (min-width: 992px) { .hero { padding: 100px 0; } .grid-container { grid-template-columns: repeat(3, 1fr); } .pricing-grid { grid-template-columns: repeat(3, 1fr); } } /* Large Desktop (1200px and up) */ @media (min-width: 1200px) { .container { padding: 0 30px; } } /* Mobile-specific optimizations */ @media (max-width: 767px) { .form-control { padding: 16px; font-size: 18px; } .btn { width: 100%; padding: 16px; font-size: 18px; } .hero { padding: 40px 0; } .features, .pricing, .contact { padding: 40px 0; } } /* Print Styles */ @media print { .navbar, .hamburger, .btn { display: none; } .container { max-width: 100%; padding: 0; } body { background: white; } }

JavaScript交互

// 移动端菜单切换 document.getElementById('hamburger').addEventListener('click', function() { const menu = document.getElementById('navMenu'); menu.classList.toggle('active'); // 更新按钮文本 const isActive = menu.classList.contains('active'); this.textContent = isActive ? '✕' : '☰'; this.setAttribute('aria-expanded', isActive); }); // 平滑滚动 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 关闭移动端菜单 const menu = document.getElementById('navMenu'); if (menu.classList.contains('active')) { menu.classList.remove('active'); document.getElementById('hamburger').textContent = '☰'; } } }); }); // 表单提交处理 document.querySelector('.contact-form').addEventListener('submit', function(e) { e.preventDefault(); // 获取表单数据 const formData = { name: document.getElementById('name').value, email: document.getElementById('email').value, message: document.getElementById('message').value }; // 这里可以添加实际的提交逻辑 console.log('表单数据:', formData); // 显示成功消息 alert('感谢您的留言！我们会尽快与您联系。'); // 清空表单 this.reset(); }); // 窗口大小改变时的处理 let resizeTimer; window.addEventListener('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { // 在这里可以添加响应式调整的逻辑 console.log('窗口大小已改变'); }, 250); }); // 滚动时的导航栏效果 window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)'; } else { navbar.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)'; } });

测试和调试技巧

1. 浏览器开发者工具

现代浏览器都提供了强大的响应式设计测试工具：

Chrome DevTools：按F12打开，点击设备工具栏图标（或Ctrl+Shift+M）
Firefox DevTools：按F12打开，点击响应式设计模式图标
Safari DevTools：需要先在偏好设置中启用开发者菜单

2. 在线测试工具

BrowserStack：在真实设备上测试
Responsinator：快速查看不同设备效果
Google Mobile-Friendly Test：检查移动友好性

3. 真实设备测试

虽然模拟器很有用，但最终一定要在真实设备上测试：

iOS设备（iPhone、iPad）
Android设备（不同品牌和尺寸）
不同浏览器（Chrome、Safari、Firefox、Edge）

性能优化建议

1. 图片优化

/* 使用现代图片格式 */ picture { width: 100%; } picture source { /* WebP格式，更好的压缩率 */ srcset: image.webp; } picture img { width: 100%; height: auto; /* 回退到JPEG */ background: url('image.jpg'); } /* 懒加载 */ .lazy-load { opacity: 0; transition: opacity 0.3s; } .lazy-load.loaded { opacity: 1; }

2. CSS优化

/* 避免过于复杂的选择器 */ /* 不推荐 */ body > div > section > article > p > span { color: red; } /* 推荐 */ .text-highlight { color: red; } /* 使用CSS变量减少重复 */ :root { --primary-color: #667eea; --spacing-unit: 1rem; } .btn-primary { background: var(--primary-color); padding: var(--spacing-unit); } /* 避免不必要的媒体查询嵌套 */ /* 不推荐 */ @media (min-width: 768px) { .container { max-width: 720px; } @media (min-width: 992px) { .container { max-width: 960px; } } } /* 推荐 */ @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } }

3. JavaScript性能

// 防抖函数 - 优化resize等频繁触发的事件 function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // 使用示例 const handleResize = debounce(() => { console.log('窗口调整完成'); }, 250); window.addEventListener('resize', handleResize); // 懒加载图片 const lazyLoadImages = () => { const images = document.querySelectorAll('img[data-src]'); const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.add('loaded'); observer.unobserve(img); } }); }); images.forEach(img => imageObserver.observe(img)); }; document.addEventListener('DOMContentLoaded', lazyLoadImages);