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).
4 comentarios, 0 referencias
+
#