如何根据设备切换页面图片？解决visibility:hidden留白问题

问题描述 #

使用<img>标签根据访问设备（移动/桌面）显示不同图片，在移动端用visibility:hidden隐藏桌面图片时，页面出现留白。

原因分析 #

visibility:hidden仅隐藏元素的可见性，但元素仍会保留原本的布局空间，因此会导致留白问题。

解决方案 #

1. 用display: none替代visibility:hidden #

修改Sass中的.desktop类样式，将visibility:hidden替换为display: none：

.desktop {
  display: none;
}

在桌面端媒体查询中，再将桌面图片设为可见，同时隐藏移动端图片：

@media (min-width: 768px) { // 可根据实际需求调整断点宽度
  .desktop {
    display: block; // 或inline-block等符合布局的属性
  }
  .mobile {
    display: none;
  }
}

display: none会让元素完全脱离文档流，不再占据页面空间，彻底解决留白问题。

2. 使用HTML5 <picture>标签实现响应式图片（推荐） #

<picture>标签是HTML5专为响应式图片设计的语义化方案，可直接根据媒体条件加载对应图片，无需手动控制显示隐藏：

<div class="images">
  <!-- 人物图响应式处理 -->
  <picture>
    <source media="(max-width: 767px)" srcset="./images/illustration-woman-online-mobile.svg">
    <source media="(min-width: 768px)" srcset="./images/illustration-woman-online-desktop.svg">
    <img src="./images/illustration-woman-online-mobile.svg" class="woman" alt="Woman online">
  </picture>

  <!-- 背景图响应式处理 -->
  <picture>
    <source media="(max-width: 767px)" srcset="./images/bg-pattern-mobile.svg">
    <source media="(min-width: 768px)" srcset="./images/bg-pattern-desktop.svg">
    <img src="./images/bg-pattern-mobile.svg" class="pattern" alt="Background pattern">
  </picture>

  <!-- 桌面端盒子图 -->
  <img src="./images/illustration-box-desktop.svg" class="desktop" alt="Box illustration">
</div>

搭配媒体查询控制桌面盒子图的显示：

.desktop {
  display: none;
}

@media (min-width: 768px) {
  .desktop {
    display: block;
  }
}

这种方式更符合现代前端开发规范，减少冗余样式，同时提升加载效率。

内容的提问来源于stack exchange，提问作者mroungou