Consejo rápido diferentes diseños para diferentes anchos

Cada vez es más común que los sitios web y las aplicaciones proporcionen diferentes diseños dependiendo del tamaño o la resolución de la ventana del usuario. Esto se puede lograr de varias formas, desde soluciones CSS a JavaScript..

En este consejo rápido de video, aprenderemos lo simple que es hacerlo con un toque de jQuery, y el método resize ()..

Al utilizar el método "resize ()" de jQuery, podemos escuchar fácilmente cuando el usuario cambia el ancho de la ventana de su navegador.

 funcion checkWindowSize () if ($ (window) .width ()> 1800) $ ('body'). addClass ('large');  else $ ('body'). removeClass ('large');  $ (ventana) .resize (checkWindowSize);

Luego, posteriormente, nos dirigimos a nuestras propiedades CSS deseadas en consecuencia.

 #container width: 800px; altura: 1000px; fondo: # e3e3e3; margen: auto;  / * Cambiar el tamaño del contenedor para ventanas más grandes. * / .large #container width: 1000px;  #nav ancho: 100%; altura: 100px; borde inferior: 1px blanco sólido; fondo: # 999999;  .large #nav float: left; ancho: 200px; borde inferior: ninguno; borde derecho: 1px blanco sólido; altura: 1000px; 

• Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..