响应式网页设计指南

什么是响应式设计？

响应式网页设计是一种让同一网页在不同设备上都能良好显示的设计方法。无论用户使用电脑、平板还是手机，都能获得最佳的浏览体验。

视口 viewport

首先，需要在HTML中添加视口meta标签：

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

媒体查询 Media Query

使用CSS媒体查询可以根据屏幕宽度应用不同的样式：

/* 默认样式（移动端） */
body {
    font-size: 16px;
}

/* 平板及以上 */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

/* 电脑端 */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }
}

弹性布局 Flexbox

Flexbox是现代CSS布局的重要特性：

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

.item {
    flex: 1 1 300px;
}

实践建议

• 先设计移动端，再逐步扩展到更大屏幕
• 使用相对单位（em、rem、%）而非固定像素
• 图片使用max-width: 100%确保响应式
• 测试不同设备和浏览器