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