PUBLIC MARKS from decembre with tags browser & Responsive

If you were attentive you should see that the line width: calc( 12.5em ) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do. The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions. The second: width: calc( 100% - 15em ) and width: calc( 12.5em ). This is for newer browser versions which will override the previous width definitions

the browser only knows the size of the viewport when it begins downloading images.

To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don't need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter... "Device Agnostic Mode".