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`][1] 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`][2] 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: <!-- begin snippet: js hide: false --> <!-- language: lang-js --> // 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(); }); <!-- language: lang-html --> <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="" /> <!-- end snippet --> ------ [1]: https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom