@media 的常用场景与示例

- 1. 基本概念
- 2. 常用场景
- - 2.1 不同屏幕宽度的布局调整
  - 2.2 隐藏或显示元素
  - 2.3 字体大小调整
  - 2.4 图片大小调整
  - 2.5 高度调整
  - 2.6 颜色调整
  - 2.7 鼠标悬停效果
- 3. 常用示例
- - 3.1 基本响应式布局
  - 3.2 隐藏侧边栏
  - 3.3 字体大小和图片大小
- 4. 总结

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

1. 基本概念

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

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

2. 常用场景

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

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

css">/* 桌面布局 */
.container {
  display: flex;
  justify-content: space-between;
}

/* 移动设备布局 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

2.2 隐藏或显示元素

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

css">/* 桌面显示导航栏 */
.nav-desktop {
  display: block;
}

/* 移动设备隐藏导航栏 */
.nav-desktop {
  display: none;
}

@media (max-width: 768px) {
  .nav-desktop {
    display: none;
  }
  .nav-mobile {
    display: block;
  }
}

2.3 字体大小调整

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

css">/* 默认字体大小 */
body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

2.4 图片大小调整

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

css">/* 默认图片大小 */
.image-responsive {
  width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  .image-responsive {
    width: 50%;
  }
}

2.5 高度调整

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

css">/* 默认高度 */
.hero-section {
  height: 80vh;
}

@media (max-height: 600px) {
  .hero-section {
    height: 60vh;
  }
}

2.6 颜色调整

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

css">/* 默认背景颜色 */
.body-desktop {
  background-color: #f0f0f0;
}

@media (max-width: 768px) {
  .body-desktop {
    background-color: #e0e0e0;
  }
}

2.7 鼠标悬停效果

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

css">/* 默认悬停效果 */
.button-desktop:hover {
  background-color: #4CAF50;
}

@media (max-width: 768px) {
  .button-desktop:hover {
    background-color: #4CAF50;
  }
}

3. 常用示例

3.1 基本响应式布局

css">.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 300px;
  padding: 15px;
}

@media (max-width: 768px) {
  .column {
    flex: 1 1 100%;
  }
}

3.2 隐藏侧边栏

css">.sidebar {
  width: 250px;
  float: left;
}

.content {
  margin-left: 260px;
}

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

3.3 字体大小和图片大小

css">body {
  font-size: 16px;
}

.image-responsive {
  width: 100%;
  height: auto;
}

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