如何在不同设备的动画文本之间切换？ html/css

Question

我想重用代码并使其适用于移动设备和其他设备。具体来说，当我在移动设备上时，我希望显示相同的动画但文本不同，而当我使用笔记本电脑或台式机时，我希望显示相同的动画但文本不同。

所以本质上，应该有一个动画，但它应该包含适用于移动设备的不同文本和适用于笔记本电脑或台式机或更大屏幕的另一种文本。

代码：

    document.addEventListener("DOMContentLoaded", function(event) { 

(function() {
  requestAnimationFrame(function() {
    var banner;
    banner = document.querySelector('.exponea-banner3');
    banner.classList.add('exponea-in3');
    return banner.querySelector('.exponea-close3').addEventListener('click', function() {
      return banner.classList.remove('exponea-in3');
    });
  });

}).call(this);
});

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html3,
body3 {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.exponea-banner3 {
 
  font-family: Roboto, sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2e364d;
  color: #ebeef7;
  padding: 30px 80px 30px 35px;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
  display: none;
}
.exponea-banner3.exponea-in3 {
  opacity: 1;
  transition-duration: 0.4s;
}
.exponea-banner3 .exponea-close3 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}
.exponea-banner3 .exponea-label3 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner3 .exponea-text3 {
  margin-bottom: 8px;
}
.exponea-banner3 .exponea-count3 {
  font-weight: 500;
}
.exponea-banner3 .exponea-label3 {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner3,
.exponea-close3,
.exponea-text3,
.exponea-label3,
.exponea-label3 {
    z-index: 10;
}
.open3 {
  display: block;
}

<div class="exponea-banner3 open3">
        <div class="exponea-close3">
            &times;
        </div>
        <div class="exponea-text3">
            Hi There! Thanks For Stumbling Upon My Website!
        </div>
        <div class="exponea-label3">
            - Hussain Omer
        </div>
    </div>

上述动画中的文字只能在笔记本电脑/台式机/大屏幕

上使用

---

现在，我想要相同动画，但不同文字“嗨，请使用大型设备以获得最佳体验”仅 在移动设备上。

当用户使用移动设备时，文本应该说明我上面所说的内容，而当用户使用笔记本电脑/台式机/大屏幕时，文本应该说明我在代码中发送的内容。关于如何切换动画中的文本有什么建议吗？

tl;dr：我想要相同的动画，但是当用户在移动设备上时，它应该有一个文字说“嗨，请使用大型设备以获得最佳体验”但是当用户在笔记本电脑上时/桌面或大屏幕设备，那么文本应该说明我上面发送的代码中的内容。

更新

这是我的输出的样子：

enter image description here

Answer 1

您可以使用matchMedia 来检查媒体查询并相应地更改文本。

document.addEventListener("DOMContentLoaded", function(event) { 

// Media query example
const isMobile = window.matchMedia('(max-width: 360px)')

(function() {
  requestAnimationFrame(function() {
    var banner;
    banner = document.querySelector('.exponea-banner3');

    if(isMobile) {
       document.querySelector(".exponea-text3").textContent = "Hi, please use a large 
        device for the best experience"
    }

    banner.classList.add('exponea-in3');
    return banner.querySelector('.exponea-close3').addEventListener('click', function() {
      return banner.classList.remove('exponea-in3');
    });
  });

}).call(this);
});