Az általunk használt médialekérdezések JavaScript segítségével

Nemrégiben teljesítése a következő sorrendben a sablon design, azt használatához szükséges érme csúszka. A csúszka van egy nagyon érdekes hatást, amely egy képet, és az összes tartalom a dia fokozatosan eltűnik ez alakult át egy új diát részein. Nagyon tetszett a hatás.

A probléma merült fel, amikor megpróbáltam használni az adaptív sablon. Media lekérdezések segítségével css változtatni a méret a tartalom és az összes információt, de a mérete a csúszka egy szigorú mérete képpontban, hogy módosítsa a script testreszabás és csökken a mérete az ablak csúszka maga nem változik a mérete. Csúszik tűnt egyáltalán nem tervezték alkalmazkodóképesség.

Segítség jön windows.matchmedia módszer, amely elküldi a query string azonos azzal, amelyet a css:

var MQL = window.matchMedia ( 'minden, és (max-szélesség: 480px)');

Most próbálja meg az állapot kezelésére, amikor az ablak mérete nagyobb vagy egyenlő, mint 480px vagy annál kevesebb.

Most nézze meg, ha az ablak felbontás megfelel annak a feltételnek, hogy a kód fut, vagy nem.

matchMedia és átméretezés segítségével AddListener

Szóval hogyan használjuk a korábbi állapot, de használható, ha a kívánt ablak méretét állapotban dolgozott dinamikusan, azaz anélkül, hogy frissítené a böngésző ablakot?

Először is, hoztunk létre egy függvényt, amely kezeli matchMedia (handleMatchMedia). Miután a megadott feltétel teljesül, mi fut a funkció minden alkalommal, amikor a felbontás meghatározott feltétel média lekérdezés elérte, vagy fordítva még nem érte el.

Most, amikor a böngésző képernyő méretét, a feltétel fog dolgozni menet nélküli oldal frissítése.

Tehát, ahogy kellett változtatni a méretét a csúszka segítségével vonalak a forgatókönyvet, amit rendeltem:

Ez a módszer azt mutatja, hogy lehetséges, hogy kezelni médialekérdezéseket és szkriptek tartalom kezelésére vagy a j # 097; vascript nélkül css.