Tee kaikki upotetut sisällöt reagoiviksi Reframe.js n kanssa

Kovin osa siitä videoiden upottaminen saa leveyden ja korkeuden oikein. Nämä numerot määritä kuvasuhde ja kun he ovat pois päältä saat hämärän videon soittimen.

Tämä on kaikki upotetut elementit kuten iframes ja sosiaalisen median widgetit. Ja nämä asiat voivat olla jopa hankalampia reagoivalla suunnittelulla, koska ne ovat yleensä ei reagoi elementteihin.

Mutta Reframe.js, sinä voit tehdä mikä tahansa elementti, joka vastaa mihin tahansa kuvasuhteeseen.

Tämä on ehkä yksi yksinkertaisimmista, mutta arvokkaimmista JS-laajennuksista verkossa. Se oli oikeastaan luonut Dollar Shave Club joka on yllättäen oma GitHub-sivu.

Reframe on yksi niiden ilmaisista laajennuksista rakennettu kehittäjille, jotka haluavat yksinkertaisemman tavan käsitellä reagoivaa upotettua sisältöä.

Ilmeinen syyllinen on upotettu video sivustoista, kuten YouTube ja Vimeo. Se on tunnetusti näitä elementtejä on vaikea reagoida ilman CSS: ää.

Reframe.js: n kanssa olet juuri valita mitä elementtiä haluat kohdistaa ja muokkaa sitä uudelleen käyttämällä reframe () toimia.

Aloita lisäämällä Reframe.js-laajennus verkkosivullesi. Sinä pystyt ladata kopion GitHubista, ja se on vain 1KB minified.

Sitten vain siirtää toiminnon valitsimen mitä tahansa elementtejä haluat korottaa. Lataa sivu ja puomi! Sinun pitäisi olla kaikki asetettu.

Oletetaan esimerkiksi, että sivustossasi on muutamia videoita. Sinä pystyt lisää luokka .video- upotetaan, ja käytä sitä valintana. reframe lisää automaattisesti ja luokkaa sen ympärille luoda tyyli.

Joten sinun JavaScript-koodi näyttäisi tältä:

reframe ( '. video);

Melko yksinkertainen?

Tämä koodi kohdistuu kaikkiin luokkaan kuuluviin elementteihin .video- ja tekee niistä reagoivat. Ei ylimääräisiä häkkejä, ei ylimääräistä CSS: ää. Annetaan, että CSS-menetelmällä ei ole mitään vikaa, mutta sinun täytyy käsin kääri kaikki upotetut videot ylimääräisen luokan kanssa.

Reframe vain säästää tämän ylimääräisen askeleen ja tuo kaiken läpi JavaScriptin avulla. jotta tutustu demoon ja löytää joitakin peruskoodinpätkiä, käy Reframe.js-kotisivulla. Sinä pystyt ladata koodin kopion suoraan GitHub-reposta.