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

Posted 2023-05-08

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

【英文标题】：How to toggle between text in animation for different devices? html/css

【发布时间】：2021-05-24 06:04:13

【问题描述】：

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

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

代码：

    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

【参考方案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);
);

【讨论】：

你能显示一个 sn-p 什么的吗，因为它在我这边不起作用

你尝试过不同的媒体查询吗？

不，我没有尝试使用不同的媒体查询

const isMobile = window.matchMedia('(max-width: 360px)') 我在这里检查最小宽度为 360。用适当的数字设置你的开发工具。

好的，等一下，我也会用我得到的更新我的帖子