使用 Media Queries 在不同屏幕尺寸下切换图片-html教程-PHP中文网

使用 Media Queries 在不同屏幕尺寸下切换图片

心靈之曲

发布： 2025-11-01 10:32:32

原创

855人浏览过

使用 Media Queries 在不同屏幕尺寸下切换图片

本文介绍了如何利用 css media queries 在不同屏幕尺寸下动态切换图片显示。通过设置不同类名的图片标签，并结合 media queries 控制它们的显示与隐藏，可以实现响应式图片切换效果，从而优化用户在不同设备上的浏览体验。

在响应式网页设计中，根据屏幕尺寸调整图片显示是非常常见的需求。Media Queries 是一种强大的 CSS 技术，可以让我们根据不同的设备特性（如屏幕宽度、高度、设备方向等）应用不同的样式规则。本文将详细介绍如何使用 Media Queries 实现不同屏幕尺寸下切换图片的功能。

实现原理

核心思想是使用两个或多个 <img> 标签，每个标签对应一个特定屏幕尺寸下的图片。然后，通过 CSS 控制它们的显示与隐藏，从而达到切换图片的效果。

具体步骤

HTML 结构：

在 HTML 中，使用两个 <img> 标签，并分别赋予不同的类名，例如 bigscreen 和 smallscreen。bigscreen 对应大屏幕显示的图片，smallscreen 对应小屏幕显示的图片。
```
<div class="right">
  <img alt="" class="bigscreen" src="image1.png" />
  <img alt="" class="smallscreen" src="image2.png" />
</div>
```
登录后复制
CSS 样式：

首先，设置默认的显示状态。例如，在大屏幕下显示 bigscreen 图片，隐藏 smallscreen 图片。

吉卜力风格图片在线生成
将图片转换为吉卜力艺术风格的作品

121

查看详情
```
.bigscreen {
  display: block;
}
.smallscreen {
  display: none;
}
```
登录后复制
Media Queries：

使用 @media 规则定义不同屏幕尺寸下的样式。例如，当屏幕宽度小于 800px 时，隐藏 bigscreen 图片，显示 smallscreen 图片。
```
@media only screen and (max-width: 800px) {
  .bigscreen {
    display: none;
  }
  .smallscreen {
    display: block;
  }
}
```
登录后复制

完整示例

<!DOCTYPE html>
<html>
<head>
<title>Responsive Images</title>
<style>
  .bigscreen {
    display: block;
  }
  .smallscreen {
    display: none;
  }

  @media only screen and (max-width: 800px) {
    .bigscreen {
      display: none;
    }
    .smallscreen {
      display: block;
    }
  }
</style>
</head>
<body>

<div class="right">
  <img alt="Big Screen Image" class="bigscreen" src="image1.png" />
  <img alt="Small Screen Image" class="smallscreen" src="image2.png" />
</div>

</body>
</html>

登录后复制

注意事项