Učinite sve ugrađenim odgovorom sadržaja pomoću Reframe.js

Najzgodniji dio ugrađivanje videozapisa dobiva ispravnu širinu i visinu. Ovi brojevi odredite omjer širine i visine i kad budu s tobom dobiti nevjerojatan video player.

Ovo je vrijedi za sve ugrađene elemente kao što su iframeovi i widgeti društvenih medija. A ove stvari mogu biti još složenije s prilagodljivim dizajnom jer su obično elementi koji ne reagiraju.

Ali s Reframe.js, možeš napraviti bilo koji element koji odgovara na bilo koji omjer.

Ovo je možda jedan od najjednostavnijih i najvrjednijih JS dodataka na webu. Zapravo je stvorio Dollar Shave Club koja iznenađujuće ima svoju GitHub stranicu.

Reframe je jedan od njihovih besplatnih dodataka izgrađen za programere koji žele jednostavniji način rukovanje odgovorajućim ugrađenim sadržajem.

Očigledan krivac je ugrađeni videozapis s web-lokacija kao što su YouTube i Vimeo. To je poznato teško učiniti da ti elementi reagiraju bez CSS hakova.

S Reframe.js, vi ste upravo Odaberi koji god element želite ciljati i preoblikujte koristiti reframe () funkcija.

Počnite dodavanjem dodatka Reframe.js na svoju web-stranicu. Možeš preuzmite kopiju od GitHub-a, i to je samo 1KB minified.

Onda, vi samo proći funkciju izbornik za sve elemente koje želite preoblikovati. Učitajte stranicu i bum! Trebali biste biti spremni.

Na primjer, recimo da imate nekoliko videozapisa ugrađenih na web-lokaciju. Možeš dodajte razred .video na uložiti, i to kao izbornik. Reframe automatski dodaje div i razred oko njega stvoriti odgovarajući stil.

Dakle, vaš JavaScript kôd izgledao bi ovako:

reframe ( 'Video.');

Prilično jednostavno?

Ovaj kod cilja sve elemente klase .video i čini ih osjetljivima. Bez dodatnih hakova, bez dodatnog CSS-a. Odobreno je ništa loše u korištenju CSS metode, ali trebat ćete ručno omotati sve ugrađene videozapise s dodatnom klasom.

Preokreni samo štedi taj dodatni korak i sve to donosi pomoću JavaScripta. Do pogledajte demo i pronađite neke osnovne isječke koda, posjetite početnu stranicu Reframe.js. Možeš preuzmite kopiju koda ravno iz GitHub repoa.