Recursos web, diseño, joomla!, tutoriales, opinión, algunas noticias...

Suscríbete a través del feed RSS
Recibe los últimos artículos a tu e-mail
Realizar una búsqueda
Maquetaciones dinámicas con Javascript y CSS Compartelo!
lunes, 15 de septiembre de 2008
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:

HTML
  1. <script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.min.js" type="text/javascript">
  2. </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:


HTML
  1. <script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0.js?sizes=600,800,1200" type="text/javascript">
  2. </script>

En este caso se define que detecte como anchos 600px, 800px y 1200px. Finalmente en nuestra hoja de estilo tendremos que incorporar como se mostraran los elementos en base al valor que tome la clase, por ejemplo:


CSS
  1. /* Si la clase es bw-1000, el ancho de header es de 950px y de color blanco*/
  2.  
  3. .bw-1000 #header {
  4. width: 950px;
  5. background-color:#FFF;
  6. }
  7.  
  8. /* Si la clase es bw-1200, el ancho de header es de 1100px y de color negro*/
  9.  
  10. .bw-1200 #header {
  11. width: 1100px;
  12. background-color:#000;
  13. }

Media Queries plugin

  • Es un plugin para jQuery que añade soporte de Media Queries, el cual permite definir mediante expresiones cuando se debe aplicar un estilo en base a las propiedades del medio. El plugin solamente permite definir las expresiones en base al ancho de pantalla del usuario. Utilización:
En el head añadimos los estilos a utilizar, en este caso vamos a cargar un estilo para una resolución mayor a 1100px, otro estilo para una resolución menor a 820px y un estilo por default en caso de estar entre los dos valores. En la propiedad "media" debemos añadir la expresión que define el ancho del medio y el tipo:


HTML
  1. <!--Estilo predeterminado-->
  2. <link href="default.css" rel="stylesheet" type="text/css" media="screen">

  4. <!--Estilo para una resolución mayor a 1100px, tipo de medio screen-->
  5. <link href="ancho.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1100px)">

  7. <!--Estilo para una resolución hasta 820px, tipo de medio screen-->
  8. <link href="angosto.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 820px)">

Finalmente incorporamos a jQuery y al plugin:


HTML
  1. <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
  2. </script>
  3. <script src="http://www.leandrodonofrio.com/jquery.mediaqueries.js" type="text/javascript">
  4. </script>

Y eso es todo, el plugin se encargará de cambiar la hoja de estilo en base a la expresión que hayamos definido.



..y tal vez te interese:

¿Te interesó este artículo?Puedes suscribirte al feed RSS ó dejar tu email para recibir las últimas noticias, tal como lo hacen actualmente las 2513 personas que siguen al blog




 Comentarios


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code
 
< Anterior   Siguiente >
[Volver]

Puedes suscribirte al blog de dos formas

Ingresando tu e-mail:

Utilizando el canal RSS:

Artículos populares

Nube de tags

ajax  articulos  blog  cms  css  descargar  diseño  firefox  flash  google  gratis  gráficos  herramientas  imágenes  internet  javascript  joomla  jquery  mootools  opensource  photoshop  php  recursos  seo  tecnología  tips  tutoriales  web  web2.0  windows  2008 

Realizar una búsqueda

Sitios Recomendados