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:

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

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

    $(document).ready(function() {

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

------

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


  [1]: https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag