Foros del Web » Creando para Internet » CSS »

Cambiar formato de pagina segun ancho

Estas en el tema de Cambiar formato de pagina segun ancho en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/11/2010, 11:15
 
Fecha de Ingreso: noviembre-2010
Mensajes: 113
Antigüedad: 7 años
Puntos: 10
Cambiar formato de pagina segun ancho

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!
  #2 (permalink)  
Antiguo 17/11/2010, 12:22
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Cambiar formato de pagina segun ancho

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

Slds.-
  #3 (permalink)  
Antiguo 18/11/2010, 03:23
 
Fecha de Ingreso: noviembre-2010
Mensajes: 113
Antigüedad: 7 años
Puntos: 10
Respuesta: Cambiar formato de pagina segun ancho

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.
  #4 (permalink)  
Antiguo 18/11/2010, 04:09
 
Fecha de Ingreso: noviembre-2010
Mensajes: 113
Antigüedad: 7 años
Puntos: 10
Respuesta: Cambiar formato de pagina segun ancho

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">
  #5 (permalink)  
Antiguo 18/11/2010, 10:14
 
Fecha de Ingreso: noviembre-2010
Mensajes: 113
Antigüedad: 7 años
Puntos: 10
Respuesta: Cambiar formato de pagina segun ancho

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!

Etiquetas: ancho, formato
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:12.