javascript - 使用手机时如何隐藏一个 svg 并显示另一个？

Question

我正在开发一个带有反应带的网络应用程序。我使用 2 个 SVG 作为背景，我希望仅当用户从 PC 访问它时才显示一个，而另一个仅当用户在手机上访问时才显示。所以基本上我希望当用户用手机访问网站时隐藏第一个 SVG，反之亦然

Answer 1

一个简单而优雅的解决方案是在要在 PC 上显示的 svg 的父 html 元素上应用引导类 hidden-xs 和 visible-xs svg分别在移动设备上显示。

工作原理:

1. 所有以 -xs 为后缀的类仅在视口(viewport)低于 480 像素时应用其效果。
2. 因此，在 hidden-xs 的情况下，只要视口(viewport)分辨率低于 480 像素，应用该类的元素就会隐藏。在更高的分辨率下，默认情况下将显示。
3. 对于 visible-xs 来说，应用该类的元素仅在视口(viewport)分辨率低于 480 像素时显示。在更高的分辨率下，默认情况下它将隐藏。

示例:

<div class="visible-xs">
  <svg /> <-- This will be shown on mobile and hidden on desktop --!>
</div>
<div class="hidden-xs">
 <svg /> <-- This will be hidden on mobile and shown on desktop --!>
</div>

在 Bootstrap 4 中，这可以通过使用以下格式的类来实现:

• .d-{value} 代表 xs
• .d-{breakpoint}-{value} 用于 sm、md、lg 和 <强>xl。

其中值是以下之一:

• 无
• 内联
• 内联 block
• block 表
• 表格单元格
• 表格行
• 弯曲
• 内联柔性