With CSS how can I smoothly change a div's width from 80% of container to 100% of container as container shrinks down from 1000px to 600px? - css

Question

I'd like to have a div be 80% of its container's width, when that width is 1000px or greater.
I'd like it to be 100% of my its container's width, when that width is 600px or smaller.
In the middle I'd like it to be, well, in the middle.
http://jsfiddle.net/ayjtr1q4/9/
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%
}
}
<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>
ContainerSize -> divSizeAs% (divSizeInPixels)
400px -> 100% (400px)
500px -> 100% (500px)
600px -> 100% (600px)
700px -> 95% (665px)
800px -> 90% (720px)
900px -> 85% (765px)
1000px -> 80% (800px)
1100px -> 80% (880px)
1200px -> 80% (960px)
Etc.
I know I could set a dozen media queries with breakpoints, but I'd rather it was a smooth transition, if possible.
I feel I could do something clever with calc, but am having a bit of a blank and can't quite get my head around what! But then I guess you'd need some max/min functionality, which I don't believe CSS has?
My middle-ground I've come up with so far is 3 media queries. One for >= 1000px (width:800%), one for <= 600px (width:100%) and one for in the middle... But even then I can't work out what my rules for the middle-ground should be?

Answer 1

You can do that with Calc. You are only concerned with the amount of space over 600px (100% - 600px), and the increment is the total space to smooth (400px). I'm not really a mathematician, maybe someone else (smarter) can give you a better equation.
#media screen and (min-width:1000px) and (max-width:600px){
#container{
width: calc(100% - ((100% - 600px) * 0.466));
}
}
Full code snippet:
#container{
background: red;
width: 800px;
height: 20px;
}
#media screen and (max-width:600px){
#container{
width: 100%;
}
}
#media screen and (max-width: 1000px) and (min-width: 600px) {
#container{
background: green;
width: calc(100% - ((100% - 600px) * 0.466));
}
}
<div id="container">
</div>

Answer 2

Here's a somewhat more elegant way to achieve what you're looking for, using only one breakpoint. Also, I recommend using em instead of px for your breakpoints.
div {
background: #def;
width: 100%;
height: 6.25em;
margin: 0 auto;
}
/* 37.5em = 600px */
#media (min-width: 37.5em) {
div {
background: #fed;
/* Replace .5 with whatever value
looks best in your layout */
width: calc(37.5em + ((100% - 37.5em) * .5));
}
}
<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>