<div>
    As you resize the screen this snaps from 80% to 100%.
    I'd like to achieve a smooth transition between the two
    instead, so that if you set it to 800px wide you'll end
    up with a div that's 90% of that, i.e. 720px.
</div>

div {
  background: #def;
  height: 100px;
  margin: 0 auto;
}

@media screen and (min-width: 1000px) {
  div {
    width: 80%
  }
}

@media screen and (min-width: 601px) and (max-width: 999px) {
  div {
    /* what goes in here? */
  }
}

@media screen and (max-width: 600px) {
  div {
    width: 100%
  }
}