响应式布局最佳实践：从移动优先到断点设计

响应式布局是现代网站的标配，本文介绍模板开发中的最佳实践。

一、移动优先原则

先写移动端样式，再用媒体查询适配大屏：

/* 基础样式（移动端） */
.container {
padding: 0 16px;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}

/* 平板 */
@media (min-width: 768px) {
.container { padding: 0 24px; }
.grid { grid-template-columns: 1fr 1fr; }
}

/* 桌面 */
@media (min-width: 1024px) {
.container { padding: 0 32px; max-width: 1200px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}

二、常用断点

• xs：< 640px（手机竖屏）
• sm：640-768px（手机横屏）
• md：768-1024px（平板）
• lg：1024-1280px（小屏笔记本）
• xl：> 1280px（桌面显示器）

三、关键技巧

1. 使用 rem 而非 px

html { font-size: 16px; }
/* 用户调整浏览器字体大小时会自动适配 */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */

2. 图片自适应

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

3. Flexbox 布局

.card {
display: flex;
flex-direction: column;
gap: 12px;
}
.card-body {
flex: 1; /* 自动填充剩余空间 */
}

4. CSS Grid 网格

/* 自适应网格，最小 280px 一列 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}

5. 视口单位

/* 全屏 Hero 区 */
.hero { min-height: 100vh; }

/* 字体随视口缩放 */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

四、测试方法

浏览器开发者工具

按 F12 打开，点击设备图标，选择不同设备测试。

常见测试尺寸

• 375px（iPhone SE）
• 414px（iPhone Plus）
• 768px（iPad 竖屏）
• 1024px（iPad 横屏）
• 1440px（MacBook）

五、常见问题

图片在小屏上太大？
确保设置了 max-width: 100%。

文字在窄屏溢出？
添加 word-break: break-word 或 overflow-wrap: break-word。

导航栏在手机上挤一行？
使用汉堡菜单，小屏时折叠导航。