css - Continuously adjust element size as screen size changes

Question

Is there a way to use media queries to change the value of a CSS property gradually as the screen changes size (continuously/smoothly). Instead of setting a bunch of break points at which there is a change (step-ly)?

Like on this site: http://www.bluegoji.com/? The margins of the <a> tags in the <ul> at the top of the page (navbar) decrease continuously as you narrow the browser window.

That is the behavior I am trying to achieve.

Or is the solution just to use so many media queries that it appears to change smoothly??

Answer 1

Consider using viewport percentage units.

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

• vw unit - Equal to 1% of the width of the initial containing block.
• vh unit - Equal to 1% of the height of the initial containing block.
• vmin unit - Equal to the smaller of vw or vh.
• vmax unit - Equal to the larger of vw or vh.

DEMO