Maak alle ingesloten inhoud responsief met Reframe.js

Het lastigste deel over video's insluiten krijgt de breedte en hoogte correct. Deze nummers definieer de beeldverhouding en wanneer ze uit zijn, zul je krijg een wonky videospeler.

Dit is waar voor alle ingebedde elementen zoals iframes en widgets voor sociale media. En deze dingen kunnen zelfs lastiger zijn met responsief ontwerp, omdat ze meestal zijn niet reagerende elementen.

Maar met Reframe.js, je kunt maken elk element dat reageert op elke beeldverhouding.

Dit is misschien een van de eenvoudigste maar meest waardevolle JS-plug-ins op het internet. Het was eigenlijk gemaakt door Dollar Shave Club die verrassend zijn eigen GitHub-pagina heeft.

Herschalen is een van hun gratis plug-ins gebouwd voor ontwikkelaars die een eenvoudiger manier van willen omgaan met responsieve ingesloten inhoud.

De voor de hand liggende boosdoener is ingesloten video van sites zoals YouTube en Vimeo. Het is berucht moeilijk om deze elementen responsief te maken zonder CSS-hacks.

Met Reframe.js, je gewoon kiezen welk element u ook wilt targeten en opnieuw inlijsten de ... gebruiken reframe () functie.

Begin door de Reframe.js-plug-in aan uw webpagina toe te voegen. Jij kan download een kopie van GitHub, en het is slechts 1 KB verkleind.

Dan, gewoon geef de functie een selector door voor welke elementen je ook wilt herschrijven. Laad de pagina en boem! Je moet helemaal klaar zijn.

Laten we bijvoorbeeld zeggen dat je een paar video's hebt ingesloten op je site. Jij kan voeg de klas toe .video- naar de insluiting, en gebruik dat als de selector. reframe voegt er automatisch een div en klasse omheen toe om de responsieve stijl te creëren.

Dus jouw JavaScript-code zou er als volgt uitzien:

reframe ( 'video.');

Vrij eenvoudig recht?

Deze code target alle elementen met de klasse .video- en maakt ze responsief. Geen extra hacks, geen extra CSS. Toegegeven, er is niets mis met het gebruik van de CSS-methode, maar je zult het wel moeten doen handmatig inpakken alle ingesloten video's met de extra klas.

Alleen opnieuw inlijsten bespaart je die extra stap en brengt alles door met JavaScript. Naar bekijk een demo en zoek enkele basiscodefragmenten, bezoek de startpagina van Reframe.js. Jij kan download een kopie van de code rechtstreeks uit de GitHub-repo.