如何在不同设备的动画文本之间切换?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:我想要相同的动画，但当用户在移动设备上时，它应该有一个文本说"嗨，请使用大型设备以获得最佳体验";但是当用户使用笔记本电脑/台式机或大屏幕设备时，那么文本应该在我上面发送的代码中说明它是什么。

更新我的输出是这样的:

输入图片描述

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);
});