Az összes beágyazott tartalom reagálása a Reframe.js programmal

A legnehezebb része videók beágyazása a szélesség és a magasság helyes. Ezek a számok határozza meg a képarányt és mikor lesznek kap egy zseniális videolejátszót.

Ez igaz az összes beágyazott elemre például iframes és szociális média widgetek. És ezek a dolgok még trükkösebbek is lehetnek, ha általában érzékenyek nem érzékeny elemek.

De Reframe.js, meg tudod csinálni bármely elem, amely bármilyen képarányra érzékeny.

Ez talán az egyik legegyszerűbb, de legértékesebb JS plugin az interneten. Valójában ez volt Készítette: Dollar Shave Club amely meglepően rendelkezik saját GitHub oldalával.

Reframe az egyik ingyenes plugin olyan fejlesztők számára készült, akik egyszerűbb módot akarnak az érzékeny beágyazott tartalom kezelése.

A nyilvánvaló tettes a beágyazott videó, például a YouTube és a Vimeo. Jól ismert nehéz ezeket az elemeket reagálni CSS hack nélkül.

A Reframe.js-al, csak választ melyik elemet célozni szeretné, és reframeálja használni a reframe () funkció.

Kezdje hozzá a Reframe.js bővítményt a weboldalához. tudsz töltse le a másolatot a GitHub-tól, és ez csak 1KB-s lesz.

Akkor csak átadja a funkciót egy választónak minden olyan elemre, amelyet át akarunk építeni. Töltse be az oldalt és boom! Mindet be kell állítanod.

Tegyük fel például, hogy van néhány videó a webhelyen. tudsz add hozzá az osztályt .videó- a beágyazáshoz, és ezt választóként használja. reframe automatikusan hozzáad egy div és osztályt az érzékeny stílus létrehozásához.

Tehát a te JavaScript kód így néz ki:

reframe ( 'video');

Elég egyszerű?

Ez a kód az osztály minden elemét célozza meg .videó- és reagálnak. Nincs extra hack, nincs extra CSS. Megengedett, hogy nincs semmi baj a CSS módszer használatával, de szükséged lesz rá kézi csomagolás minden beágyazott videó az extra osztályban.

Reframe csak megmenti ezt az extra lépést és a JavaScripttel együtt. Nak nek nézd meg a demót és találjon néhány alapvető kódrészletet, látogasson el a Reframe.js honlapjára. tudsz töltse le a kód másolatát közvetlenül a GitHub repóból.