How to make page layout responsive for every successive little change in window size?

Question

Yes, I know how to use media queries. But it allow us to specify min-width and max-width that is range after which css will change. But consider this website styledotme.com
The block/div just below navigation bar keeps getting smaller and smaller almost as if pixel-by-pixel as we decrease window size. How such responsiveness is acheived?

Answer 1

Combination of media queries and elements that can look good at different sizes. One technique is using background-image that are sized to cover. This one uses no media queries:

#menu { height: 50px; background-color: green; }
#footer {height: 50px; background-color: blue; }
#middle {height: calc(100vh - 100px);
  background-image: url(http://placehold.it/200x100);
  background-size: cover;
  background-position: center;
  }

<div id="menu">Menu</div>
<div id="middle">Middle</div>
<div id="footer">Footer</div>