Contenido

syze, añade @media queries avanzadas y cross browser con javascript

5 Ene

+ 4

Syze, es una librería javascript cross-browser, cross-device y cross-library que nos permitirá disponer de una opción funcional para disfrutar de los @media queries de CSS3. Y todo ello en menos de 1KB.

Instalación

Añadimos la llamada al CDN (o descargamos el fichero JS y lo servimos desde nuestro servidor).

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

Y añadimos una línea Javascript que indicará las opciones de las que queremos disponer en nuestro CSS.

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

Esto nos permitirá trabajar con un sistema de clases que podremos condicionar, haciendo que se ajuste a cada dispositivo dependiendo de su tamaño y su orientación.

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); }

Podéis ver un ejemplo directamente desde aquí (redimensionar la página).

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.