Recent, în timp ce făceam o altă comandă pentru a dezvolta un șablon, trebuia să folosesc Coin Slider. Acest cursor are un efect foarte interesant, în care imaginea și întregul conținut al diapozitivului dispar treptat, ca și cum ar fi transformat într-un diapozitiv nou în părți. Mi-a plăcut foarte mult acest efect.
Problema a apărut când am încercat să o folosesc într-un șablon adaptiv. Solicitările media prin css modifică dimensiunea conținutului și toate informațiile, dar dimensiunea cursorului are dimensiuni stricte în pixeli, care se modifică prin setările scriptului și când dimensiunea ferestrei scade, slider-ul însăși nu își schimbă dimensiunea. Glisorul nu a fost absolut conceput pentru adaptabilitate.
Metoda windows.matchmedia vine la salvare, care transmite șirul de interogare identic cu cel folosit în css:
var mql = window.matchMedia ('toate și (max-width: 480px)');
Acum, încercați să procesați condiția atunci când dimensiunea ferestrei este mai mare de 480px sau egală și mai mică.
Acum verificăm dacă rezoluția ferestrei corespunde condiției în care executăm codul sau nu.
matchMedia și redimensionați utilizând AddListener
Deci, cum folosim condiția anterioară, dar ce se întâmplă dacă condiția a fost declanșată dinamic când dimensiunea ferestrei specificată a fost atinsă, adică fără actualizarea ferestrei browserului?
Mai întâi de toate, am creat o funcție care să se ocupe de matchMedia (handleMatchMedia). După ce este setată condiția, executăm funcția de fiecare dată când rezoluția specificată în condiția solicitării mass-media este atinsă sau vice versa nu a fost încă atinsă.
Acum, dacă redimensionați ecranul browserului, condiția va funcționa fără să actualizeze pagina.
Deci, pentru că am schimbat mărimea cursorului utilizând liniile din scenariu, m-am înregistrat:
Această metodă arată că este posibil să procesați solicitările media și să gestionați conținut sau scripturi cu j # 097; vascript fără css.
Trimiteți-le prietenilor: