Padarīt visu iegulto saturu atsaucīgu ar Reframe.js
Par visgrūtāko daļu video ievietošana kļūst pareizais platums un augstums. Šie skaitļi definējiet attēla attiecību un kad viņi aizvedīs jūs iegūt nevainīgu video atskaņotāju.
Tas ir attiecas uz visiem iegultajiem elementiem piemēram, iframes un sociālo mediju logrīki. Un šīs lietas var būt pat sarežģītākas ar atsaucīgu dizainu, jo tās parasti ir nav atsaucīgi elementi.
Bet ar Reframe.js, jūs varat veikt jebkurš elements, kas reaģē uz jebkuru proporciju.
Tas, iespējams, ir viens no vienkāršākajiem, bet vērtīgākajiem JS spraudņiem tīmeklī. Tas patiesībā bija izveidoja Dollar Shave Club kas pārsteidzoši ir ar savu GitHub lapu.
Reframe ir viens no to bezmaksas spraudņiem veidots izstrādātājiem, kuri vēlas vienkāršāku veidu apstrādājot atsaucīgu iegulto saturu.
Acīmredzamais vaininieks ir iegultais video no tādām vietnēm kā YouTube un Vimeo. Tas ir pazīstami šos elementus ir grūti reaģēt bez CSS hacks.
Ar Reframe.js jūs vienkārši izvēlieties neatkarīgi no elementa, kuru vēlaties atlasīt, un pārtaisīt to izmantojot reframe () funkciju.
Sāciet, pievienojot jūsu tīmekļa lapai Reframe.js spraudni. Jūs varat lejupielādējiet kopiju no GitHub, un tas ir tikai 1KB.
Tad jūs vienkārši nodot funkciju selektoram par jebkuriem elementiem, kurus vēlaties pārveidot. Ielādējiet lapu un uzplaukums! Jums vajadzētu būt visiem.
Piemēram, pieņemsim, ka jūsu vietnē ir iebūvēti daži videoklipi. Jūs varat pievienot klasi .video uz iegultu, un izmantojiet to kā selektoru. Ierakstiet automātiski pievieno divdaļiņu un klasi lai izveidotu atsaucīgu stilu.
Tātad jūsu JavaScript kods izskatās šādi:
reframe (“. video”);
Diezgan vienkārši?
Šis kods attiecas uz visiem klases elementiem .video un padara tos atsaucīgus. Nav papildu hacks, nav papildu CSS. Piešķirot nav nekas nepareizs, izmantojot CSS metodi, bet jums būs nepieciešams manuāli wrap visi iegultie videoklipi ar papildu klasi.
Atkārtojiet tikai ietaupa šo papildu soli un to visu caur JavaScript. Uz pārbaudiet demo un atrast dažus pamata koda fragmentus, apmeklējiet vietni Reframe.js. Jūs varat lejupielādējiet koda kopiju tieši no GitHub repo.
