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:
Dynamic Layout
- 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…
