|
Maquetaciones dinámicas con Javascript y CSS |
|
|
|
Por lo general, cuando deseamos un diseño que se adapte a varias resoluciones de pantalla solemos realizarlo con una maquetación líquida. Y aunque es una buena solución, algunas veces no obtenemos los resultados deseados. Entonces es cuando comenzamos a buscar soluciones alternativas:
- Es un pequeño Javascript el cual incorpora una clase al body del HTML la cual cambia de nombre en base a a la resolución de pantalla del usuario. Su utilización es muy sencilla, tan solo debemos incorporarlo por debajo de la etiqueta body:
<script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js" type="text/javascript"></script>
De forma predefinida, Dynamic Layout detecta tres anchos de pantalla: 800px, 1000px, y 1200px. Entonces, si el usuario posee un ancho de pantalla mayor a 1200px incorpora class="bw-1200" al body, en caso de estar entre 1000px y 1200px incorpora class="bw-1000", si se encuentra entre 800px y 1000px incorpora class="bw-800" y si es menor a 800px incorpora class="bw-min"
Además es posible definir los anchos de pantalla a detectar...
«Seguir leyendo...»
 Leer más en . |