Skip to main content
Recompensa finalizada con 50 de reputación otorgada por Daniel Hernández
se añadieron 606 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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 un métododos posible soluciones:

Opción 1: Usando viewport

Utiliza laSi 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 zoomwidth 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.

Alternativamente, si el objetivo son dispositivos móviles, quizás 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">

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 un método posible:

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.

Alternativamente, si el objetivo son dispositivos móviles, quizás 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">

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.

se añadieron 156 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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 un método posible:

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="" />


Alternativamente, si el objetivo son dispositivos móviles, quizás 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">

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 un método posible:

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:

function actualizarTama() {
  
  $("body").css("zoom", window.innerWidth / 500);
  
}

$(document).ready(function() {

  $(window).on("resize", actualizarTama);
  
  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="" />


Alternativamente, si el objetivo son dispositivos móviles, quizás 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">

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 un método posible:

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="" />


Alternativamente, si el objetivo son dispositivos móviles, quizás 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">
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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 un método posible:

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:

function actualizarTama() {
  
  $("body").css("zoom", window.innerWidth / 500);
  
}

$(document).ready(function() {

  $(window).on("resize", actualizarTama);
  
  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="" />


Alternativamente, si el objetivo son dispositivos móviles, quizás 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">