Odzivne slike so preprostejše z možnostjo ResponsifyJS

Sodobna spletna stran mora biti 100-odstotno odzivna, nove knjižnice pa vse to omogočajo.

Z brezplačnimi vtičniki, kot je ResponsifyJS, še lažje je, da vaša spletna mesta delujejo na vseh napravah. To free jQuery plugin prevzame posodo s slikami in jih dinamično preuredi temeljijo na različnih velikostih zaslona.

Od različnih posod slike držite drugače, lahko se spremenijo na zelo čudne načine. Včasih boste imeli fotografije ljudi in njihove obraze, ki se lahko prekinejo, ko jih spremenite na mobilnem telefonu.

Za rešitev tega problema je bil ustvarjen vtičnik Responsify. Deluje lahko samodejno, toda prava magija je v njej določite svoje območje ostrenja na sliki.

Uporablja notranji sistem decimalnih opisov da bi našli, kje naj bi bila slika osredotočena. Na primer, lahko določite položaje kot naprimer data-focus-top ki “blokov v” določen segment slike.

Te podatke je treba prenesti v obliki decimalk, npr. decimalna točka .5 cilja 50% slike (levo / desno ali zgoraj / spodaj). Seveda je to precej zmedeno. Ampak, tam je brezplačna aplikacija Responsify ki vam omogoča položaje dinamično izračunajte v brskalniku.

Samo prenesite sliko, določite območje ostrenja in nato kopirajte / prilepite kodo slike v vaše spletno mesto. Vtičnik Responsify bo imel vse podatke, ki jih potrebuje za pravilno spreminjanje velikosti slike na manjših zaslonih.

Lahko jih najdete kar nekaj povezave v živo v repo GitHub, vključno z odrezki kode za kopiranje / lepljenje v vaše spletno mesto.

Ta vtičnik ni popolna rešitev za vsak projekt. Včasih boste želijo slike za spreminjanje velikosti brez fiksnih območij ostrenja. Ampak, če uporabljate zidane mreže z jQuery ni škodljivo, če dodate ResponsifyJS v svoj stack.

Če želite izvedeti več, obiščite domačo stran vtičnika za predstavitev v živo, povezavo za prenos in celoten priročnik za namestitev.