So lösen Sie die Medienabfragen, die JavaScript stören ⇐ Jquery

[Anonymous]

Hey alle, ich habe ein JavaScript mit Scrollmagic und GSAP gemacht, was die Größe der Schriftgröße auf dem Scroll zugrößen. Sobald das JavaScript abgefeuert wird, funktionieren die Medienquerien meiner CSS nicht mehr. Man muss die Seite neu laden. < /P>
Die Tween funktioniert absolut in Ordnung. Deaktivieren Sie die JS und ändern Sie dann das Browserfenster, Sie werden feststellen, dass der Kopf aufgrund von CSS -Medienwechsel seine Größen ändert. Diese Medien werden von der JS überschrieben, wenn man nach unten rollt. Wenn Sie dann das Fenster ändern, funktionieren die Medienfragen nicht mehr. />

Code: Select all

var controller = new ScrollMagic.Controller();
var scene;

function updateTween() {
var tween;

if (window.matchMedia("(max-width: 575px)").matches) {
tween = {
fontSize: '30pt',
padding: '0.5em 0 0 0.2em',
margin: '0em'
};
} else if (window.matchMedia("(min-width: 576px) and (max-width: 767px)").matches) {
tween = {
fontSize: '30pt',
padding: '0.08em 0 0 0.15em',
margin: '0em'
};
} else if (window.matchMedia("(min-width: 768px) and (max-width: 1199px)").matches) {
tween = {
fontSize: '45pt',
padding: '0.25em 0 0 0.2em',
margin: '0em'
};
} else {
tween = {
fontSize: '45pt',
padding: '0.25em 0 0 0.2em',
margin: '0em'
};
}

if (scene) {
scene.destroy(true);
}

scene = new ScrollMagic.Scene({
duration: '100%',
triggerHook: 0,
})
.setTween(".wm", tween)
.addTo(controller);
}

updateTween();

window.addEventListener('resize', updateTween);< /code>
body,
html {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
max-width: 100vw;
overflow-x: hidden;
font-size: 18px;
background: red;
}

.box {
position: fixed;
background: yellow;
width: 100vw;
height: 15vh;
z-index: 999;
text-align: left;
}

main {
border-top: 2px solid red;
margin-top: 100vh;
width: 100vw;
height: 100vh;
font-size: 10vw;
display: inline-block;
height: auto;
line-height: 1em;
text-align: center;
}

.wm {
font-size: 60pt;
font-weight: 600;
color: #004c3f;
padding-top: 0.1em;
letter-spacing: -0.055em;
line-height: 0.8em;
padding-left: 0.075em;
margin-left: 0;
margin-top:0.5em;
}

@media (max-width: 575px) {
.wm {
font-size: 60pt;
font-weight: 600;
color: #004c3f;
padding-top: 0.1em;
letter-spacing: -0.055em;
line-height: 0.8em;
padding-left: 0.075em;
margin-left: 0;
}
}

@media (max-width: 575px) {
.wm {
font-size: 90pt;
}
}

@media (min-width: 576px) {
.wm {
font-size: 12em;
/*margin-left: 0;*/
}
}

@media (min-width: 768px) {
.wm {
font-size: 15em;
/*margin-left: 0;*/
}
}

@media (min-width: 1200px) {
.wm {
font-size: 20em;
margin-left: 0;
}
}< /code>










ScrollMagic






Head


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ullamcorper velit. Quisque luctus molestie nibh id ultricies.  Nam convallis, sapien ac aliquet finibus, risus nibh aliquam augue, in scelerisque felis ante quis ante. Aliquam pharetra in tortor quis ultrices. Cras ut lacus semper, scelerisque tortor eu, imperdiet leo. Fusce id ante felis. Duis vel faucibus metus, sit amet lacinia quam. Aenean scelerisque enim eu venenatis pharetra.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Morbi tempus elit id lorem viverra, et iaculis magna egestas. Nulla sed interdum magna. Nullam laoreet lacinia nibh, ac pretium odio molestie nec. Nullam facilisis semper lacus, non pulvinar nisl fringilla ac. Phasellus enim odio, posuere sit amet risus vel, venenatis gravida dui. Proin mollis nec velit id malesuada. Quisque lacinia, enim sit amet semper facilisis, purus nibh ullamcorper ipsum, id tristique justo tortor id nisi. Nullam mattis tincidunt mauris non porta. Ut vel finibus orci. Nunc eu mattis nisi, eget condimentum lacus. Aenean turpis orci, mollis quis metus ut, mattis sollicitudin quam. Fusce urna enim, ornare nec ullamcorper eu, hendrerit at neque. Aenean gravida convallis mauris, eget faucibus massa. Cras consequat ipsum velit, et feugiat est posuere nec. Praesent porta felis vel dui pellentesque, lacinia dignissim odio varius.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Curabitur non molestie enim. Donec sollicitudin, odio a tempor facilisis, magna quam auctor nisi, vel varius lectus sapien sit amet augue. Vestibulum in ante nec arcu hendrerit facilisis in sit amet orci. Aenean id vulputate massa. Quisque eu dapibus nisi. Mauris lorem nisl, condimentum a lorem et, posuere porta tortor. Mauris dictum purus tristique, mollis dui non, rhoncus metus. Integer metus risus, porta vitae rhoncus nec, auctor sit amet lacus. Pellentesque laoreet tristique quam, ut sodales tellus interdum sed.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Etiam efficitur arcu sit amet diam tincidunt, eget euismod neque fermentum. Vivamus faucibus eros in mi vulputate dictum. Praesent ligula quam, posuere sed euismod id, egestas vel metus. Aliquam mollis tincidunt viverra. Suspendisse potenti. Pellentesque placerat mi nec convallis faucibus. Ut nisi sapien, interdum sed varius ac, venenatis vel nisi. Sed nec odio ut diam mattis convallis. Ut facilisis dui dolor. Praesent varius sit amet lorem sed sagittis. Mauris convallis neque mollis eros fermentum, in molestie mauris tristique. Sed vel mollis neque, vitae mattis tortor.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nullam egestas finibus venenatis. Mauris lacinia semper ante, eu congue massa ultrices ut. Integer fermentum mattis odio. Ut in semper diam, ullamcorper hendrerit augue. Nullam facilisis, lacus vel varius scelerisque, lorem odio bibendum ante, sed faucibus felis metus ut tortor. Ut volutpat varius placerat. Sed accumsan molestie laoreet. In nisl ante, ullamcorper nec nisl a, feugiat varius tellus. Maecenas tristique imperdiet ultrices. Donec quis est sapien. Etiam sit amet tellus vel sem lobortis commodo. Donec pulvinar consequat fringilla. Morbi sed orci massa. Sed egestas libero vel condimentum egestas. Pellentesque aliquam lectus sit amet neque accumsan sagittis.&nbsp;