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

Answer 2

What you are looking for is not media queries. You can set widths, margins and padding in percentages. That is the normal way of doing this.

Here is an example:

HTML

<div>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
</div>

CSS

a {
    width:25%;
    display:block;
    float:left;
}

Answer 3

The example you gave uses flexbox like this:

ul {
  margin: 0;
  padding:0;
}
li {
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  outline: 1px solid silver;
}

@media screen and (min-width: 500px){
  ul {
    display: flex;
    flex-direction: row;
  }
  li {
    flex-grow: 1;
  }
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>