javascript - javascript 的窗口宽度条件

Question

刚接触 js，仅在窗口大于 768 像素时才尝试应用某些代码行。

我想出了这个:

if ($(window).width() > 768) {
    const central = document.querySelector('.central');

    const tl = new TimelineMax();

    tl.fromTo(central,1,{height:'0vh'},{height:'80vh'})
    .fromTo(central,1,{width:'100vw'},{width:'80vw'});
 }

在 HTML 文件中加载这两行:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" 
integrity="sha256-fIkQKQryItPqpaWZbtwG25Jp2p5ujqo/NwJrfqAB+Qk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" 
integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
<script src='js.js'></script>

如果没有if条件，它运行得很好，所以条件应用错误，你能帮我修复它吗？

Answer 1

将其与调整大小事件结合

$(window).resize(function() {
 if ($(window).width() > 768) {
    const central = document.querySelector('.central');

    const tl = new TimelineMax();

    tl.fromTo(central,1,{height:'0vh'},{height:'80vh'})
    .fromTo(central,1,{width:'100vw'},{width:'80vw'});
 }
}).resize();

添加了.resize()，它将在加载时调用window.resize事件。