3

Mi duda es como hacer para que todos los elementos de una página web se redimensionen conforme se cambie el tamaño de la ventana.

He probado con JQuery usando el siguiente código:

$(window).resize(function(){
    $('*').width($(this).width()).height($(this).height());
});

Pero este código lo único que hace es coger el tamaño actual de la ventana y aplicarlo a todos los elementos, por lo que se ponen todos grandes :).

La idea es hacerlo como el zoom de los navegadores, cuando das a menos se hacen mas pequeños y viceversa...

Saludos.

PD: No quiero hacerlo con CSS porque me tocaria cambiarselo a 1000 cosas...

5
  • 5
    "PD: No quiero hacerlo con CSS porque me tocaria cambiarselo a 1000 cosas..." - CSS es la manera correcta de hacer este tipo de cosas. Mejor anda preparándote Commented el 26 ene. 2016 a las 22:03
  • Pero hay alguna manera de hacerlo con JQuery? Commented el 26 ene. 2016 a las 22:05
  • Bueno, podrías usar JavaScript/jQuery para actualizar el CSS de todos tus componentes...
    – user227
    Commented el 26 ene. 2016 a las 22:34
  • Usar Css es la forma mas limpia de hacer eso, con jQuery hay que contemplar muchas cosas, adicionalmente el performance va mucho mejor usando la hoja de estilos.
    – Wilfredo
    Commented el 26 ene. 2016 a las 22:54
  • 1
    "PD: No quiero hacerlo con CSS porque me tocaria cambiarselo a 1000 cosas..." con Javascript te tomaría muchísimo más tiempo. Debes usar CSS y vas a cambiar a 1000 cosas, hazlo fácil con Twitter Bootstrap o Zurb Foundation, un par de framework responsive cross-browsers.
    – fredyfx
    Commented el 26 ene. 2016 a las 23:28

2 respuestas 2

9
+50

Leyendo la pregunta no me queda muy claro si lo que quieres hacer es que el contenido cambie dependiendo de diferentes anchos de página o si por el contrario lo que quieres es que la página se visualice igual cuando la ventana cambia de tamaño (sin saltos, siempre de manera proporcional al ancho).

Si es lo primero, te recomendaría que fueses con un framework como Bootstrap como recomiendan en los comentarios. Si es lo segundo (como parece que lo es), aquí dejo dos posible soluciones:

Opción 1: Usando viewport

Si el objetivo son dispositivos móviles, podrías utilizar viewport con un zoom y un ancho de página fijo. Así el contenido se vería igual en todos los dispositivos independientemente de su ancho (aunque seguramente habría diferencias en el alto):

<meta name="viewport" content="width=500, initial-scale=1, maximum-scale=1">

La propiedad width indica el tamaño del viewport y puede ser un valor numérico (sin unidades, en píxel) o un valor especial (p.e.: device-width); initial-scale indica el nivel de zoom inicial y luego puedes usar minimum-scale y maximum-scale para especificar el zoom mínimo y máximo respectivamente; y otra propiedad útil sería user-scalable=no que previene que el usuario pueda aplicar zoom y es útil en apps web para móvil.


Opción 2: Usando zoom con CSS y JavaScript

Utiliza la propiedad zoom de CSS con el elemento body, y actualízala dinámicamente con JavaScript cada vez que la ventana cambie de tamaño. El valor de zoom va de 0 a 1, por lo que el valor que le debes asignar sería = ancho de ventana / ancho deseado de contenido.

Sería algo como esto:

// función que actualiza el zoom del elemento body
function actualizarTama() {
  
  $("body").css("zoom", window.innerWidth / 500);
  
}

$(document).ready(function() {

  // actualizaremos el zoom cuando la ventana cambie de tamaño
  $(window).on("resize", actualizarTama);
  
  // y al cargar la página
  actualizarTama();
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Título</h1>
<h2>Subtítulo</h2>
<p>Esta página está hecha para un ancho de 500 píxels, cuando la ventana cambia de tamaño, 
se aplica zoom para que todo se siga viendo de manera proporcional (como si la ventana 
siguiera teniendo 500px).</p>
<p>Pulsa en el botón "Página completa" y cambia el tamaño de la ventana, verás como el 
tamaño del contenido se mantiene siempre proporcional al ancho.</p>
<p>
<img src="http://lorempixel.com/400/200" alt="" />


2
  • Genial!!, El primer ejemplo que me has puesto es perfecto gracias. Pero e visto que usando la etiqueta meta viewport consigo el resultado deseado. Gracias. Commented el 28 ene. 2016 a las 10:03
  • Me alegro que viewport funcionara. Voy a cambiar la pregunta un poco para destacar esa opción.
    – Alvaro Montoro
    Commented el 28 ene. 2016 a las 12:22
4

¿Por qué intentas ir por ese camino?, no sería más simple si implementas bootstrap, con el sistema Grid podrías lograr que los controles html se adapten de forma responsiva al cambio del browser.

Bootstrap Grid

Bootstrap Grid System

Creo que en un desarrollo moderno es la mejor opción para implementar desarrollos que se adapten a las diferentes dimensiones de las ventanas del browser.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.