Cambiar formato de pagina segun ancho

[kanutocm]

No me he explicado muy bien con el titulo del post... lo que quiero saber es como hacer que segun el ancho de la ventana del navegador la página web se muestre de un modo u otro sin tener que cargar otra pagina, es decir mediante CSS i/o javaScript.

Ejemplo: http://www.w3.org/ al reducir el ancho de la ventana, la pagina elimina los menús, reduce el tamaño de la fuente y carga un banner mas pequeño para poder usar la misma página tanto en PC cómo en teléfonos móviles sin tener un documento distinto para cada uno.

Es muy complejo hacer esto? Es necesario javaScript o es posible hacerlo solo con CSS?

Gracias!

[DragonX]

utilizando medidas en % (porcentaje) o utilizando medidas en em a toda tu estructura.

Slds.-

[kanutocm]

Gracias DragonX, pero no es a lo que me referia. Ya tengo las dimensiones en porcentajes, lo que yo quiero es el efecto que hace el ejemplo que puse.
Entrad en www.w3.org y reducid el ancho del navegador, hasta un tercio o menos de la pantalla, vereis como automaticamente cambian imagenes, tamaño de texto, desaparecen los menus de la izquierda, etc... para que pueda verse correctamente en móviles.

[kanutocm]

Creo que toda la chicha esta en esta parte del codigo...
<link media="handheld, only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet" href="/2008/site/css/minimum">

[kanutocm]

Vale, ya lo he conseguido, es bastante facil, y aunque no se ha hecho mucho caso a este post, pongo la solucion para que si no la conociais veais como se hace. Os recomiendo que lo probeis!!!

Este sistema se llama "Media Queries" y creo que solo funciona con CSS3.

Poniendo las siguientes lineas de código nos cargará la hoja de estilo mini.css si el ancho del navegador es menor que 481px y la de defecto.css si no es así.

Código HTML:

<link rel="stylesheet" href="defecto.css" />
<link rel="stylesheet" href="mini.css" media="only screen and (max-width : 481px)" /> 

Lo bueno de esto es que varia de un estilo a otro de forma dínamica, sin tener que recargar la web.

Más info: http://eliseos.net/boilerplate-comenzar-entender-css3-media-queries/

Espero que os sirva, e insisto, probadlo!