桌面和移动设备上不同的缩放效果

Question

我正在使用这个 JS 和 CSS 为标题图像添加缩放效果。它在桌面上完美运行。

问题在于移动英雄图像没有“填充”整个容器。

所以我需要有 2 个不同的 JS 和 2 个不同的 % 设置，以使其在桌面和移动设备上都可以工作。

是否有一种解决方案可以根据屏幕尺寸制作一个满足我的 2 个不同需求的脚本？ “此功能适用于桌面，此功能适用于移动设备”？

对于那些知道我正在使用 GeneratePress 的 Elements 功能来显示整个网站的英雄标题的人。

这是适用于桌面的 JS + CSS：

JS

<script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100+'%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation();
</script>

CSS

.page-hero {
     transition: background-size 1s cubic-bezier(0.1, 0.135, 0.15, 0.86), opacity 1s ease-out 0.1s !important;
    opacity: 0; background-size: 150% auto;
}

这是我需要为移动设备添加的 JS + CSS：

JS

<script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 200+'%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation();
</script>

CSS

.page-hero {
     transition: background-size 1s cubic-bezier(0.1, 0.135, 0.15, 0.86), opacity 1s ease-out 0.1s !important;
    opacity: 0; background-size: 300% auto;
}

感谢您的帮助！

Answer 1

当文档 html/body 被加载时，您正在调用该函数。

<script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100+'%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation();
</script>

改成这样：

<script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100+'%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation;
</script>

或者这个：

<script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100+'%';
        pagehero.style.opacity = '1';
}
    
    document.onload = function() { hero_animation() };
</script>

其次，您应该将100/200 更改为字符串。 JavaScript 区分大小写：

pagehero.style.backgroundSize = '100' + '%';

或者

pagehero.style.backgroundSize = (Number(100).toString()) + '%';