@media 的常用场景与示例

在现代网页设计中，响应式设计是至关重要的。@media 查询是实现响应式设计的核心工具之一，它允许你根据不同的屏幕尺寸和设备特性应用不同的样式。本文将详细介绍 @media 的常用场景和示例，帮助你更好地理解和应用响应式设计。

1. 基本概念

@media 查询是 CSS 中的一种条件语句，用于根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式。基本语法如下：

@media (条件) {/* 样式 */
}

2. 常用场景

2.1 不同屏幕宽度的布局调整

最常见也是最重要的使用场景是根据屏幕宽度调整布局。例如，将桌面布局转换为移动设备的单列布局。

/* 桌面布局 */
.container {display: flex;justify-content: space-between;
}/* 移动设备布局 */
@media (max-width: 768px) {.container {flex-direction: column;}
}

2.2 隐藏或显示元素

根据屏幕尺寸隐藏或显示特定的元素，以优化用户体验。

/* 桌面显示导航栏 */
.nav-desktop {display: block;
}/* 移动设备隐藏导航栏 */
.nav-desktop {display: none;
}@media (max-width: 768px) {.nav-desktop {display: none;}.nav-mobile {display: block;}
}

2.3 字体大小调整

在不同屏幕尺寸下调整字体大小，以确保可读性。

/* 默认字体大小 */
body {font-size: 16px;
}@media (max-width: 768px) {body {font-size: 14px;}
}@media (max-width: 480px) {body {font-size: 12px;}
}

2.4 图片大小调整

根据屏幕尺寸调整图片的大小，以优化加载速度和视觉效果。

/* 默认图片大小 */
.image-responsive {width: 100%;height: auto;
}@media (min-width: 769px) {.image-responsive {width: 50%;}
}

2.5 高度调整

在不同屏幕尺寸下调整元素的高度，以适应不同的布局需求。

/* 默认高度 */
.hero-section {height: 80vh;
}@media (max-height: 600px) {.hero-section {height: 60vh;}
}

2.6 颜色调整

在不同屏幕尺寸下调整颜色，以适应不同的视觉需求。

/* 默认背景颜色 */
.body-desktop {background-color: #f0f0f0;
}@media (max-width: 768px) {.body-desktop {background-color: #e0e0e0;}
}

2.7 鼠标悬停效果

在移动设备上禁用或调整鼠标悬停效果，以优化用户体验。

/* 默认悬停效果 */
.button-desktop:hover {background-color: #4CAF50;
}@media (max-width: 768px) {.button-desktop:hover {background-color: #4CAF50;}
}

3. 常用示例

3.1 基本响应式布局

.container {display: flex;flex-wrap: wrap;
}.column {flex: 1 1 300px;padding: 15px;
}@media (max-width: 768px) {.column {flex: 1 1 100%;}
}

3.2 隐藏侧边栏

.sidebar {width: 250px;float: left;
}.content {margin-left: 260px;
}@media (max-width: 768px) {.sidebar {width: 100%;float: none;}.content {margin-left: 0;}
}

3.3 字体大小和图片大小

body {font-size: 16px;
}.image-responsive {width: 100%;height: auto;
}@media (max-width: 768px) {body {font-size: 14px;}.image-responsive {width: 80%;}
}

4. 总结

@media 查询是实现响应式设计的关键工具。通过合理使用 @media 查询，你可以根据不同的屏幕尺寸和设备特性应用不同的样式，从而创建出适应各种设备的网页。