Corsi on-line

Syze: media query con JavaScript

Syze è una piccola libreria Open Source basata su JavaScript che offre come vantaggi delle dimensioni estremamente limitate (“pesa” infatti meno di 1 Kb) e il fatto di non dipendere da alcun framework (ad esempio jQuery) essendo totalmente standalone; lo scopo per la quale è stata concepita attiene alle sempre più attuali media query, essa infatti consente di creare layout maggiormente responsivi per siti Web.

Adattare il proprio sito Web ai diversi browser e alle dimensioni delle aree di visualizzazione dei vari device è ormai un obbligo data la grande diffusione dei dispositivi mobili come smartphone e tablet, Syze consente quindi di definire in modo molto semplice, utilizzando soltanto una funzione, un numero indefinito di altezze e di breakpoints; i metodi per il resize delle finestre e per adattare la visualizzazione delle pagine all’orientamento di un device verranno richiamati automaticamente.

Nonostante le limitate dimensioni, la libreria consente di associare numerosi eventi ai vari cambiamenti di stato e permette allo sviluppatore di essere immediatamente produttivo; utilizzare Syze è infatti molto semplice, basta richiamare la libreria in questo modo:

<script src="//rezitech.github.com/syze/syze.min.js"></script>

per poi definire le diverse dimensioni per il resize:

syze.sizes(320, 480, 768, 1024, 1920);

e quindi associarle al tag body tramite CSS:

body { background: no-repeat center center; }
.is320  body { background-image: url(mobile-tall-128x128.png); }
.is480  body { background-image: url(mobile-wide-128x128.png); }
.is768  body { background-image: url(tablet-tall-256x256.png); }
.is1024 body { background-image: url(tablet-wide-256x256.png); }
.is1920 body { background-image: url(hdsize-wide-512x512.png); }

Nel sito ufficiale del progetto sono disponibili alcuni esempi riguardanti l’utilizzo di Syze in sede di sviluppo e produzione.

Post correlati
I più letti del mese
Tematiche