@media 的常用场景与示例

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

4. 总结

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