常见应用场景
1. **布局调整**：从单列布局切换为多列网格
2. **导航变化**：移动端汉堡菜单转为桌面端水平导航
3. **字体大小**：在更大屏幕上使用更大的字号
4. **间距调整**：增加元素之间的间距以提升可读性
示例代码
下面是一个使用 `@media (min-width: 768px)` 的典型例子：
css
.container {
padding: 0 16px;
}
/* 在中等屏幕及以上应用的样式 */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.nav-toggle {
display: none; /* 隐藏移动端菜单按钮 */
}
.nav-menu {
display: flex; /* 显示完整导航菜单 */
}
.title {
font-size: 28px;
}
}
/* 在大屏幕上进一步调整 */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
这个例子展示了如何根据屏幕宽度逐步增强页面布局，从移动端的单列布局过渡到平板的双列布局，再到桌面的三列布局。