How to grow the width of a div as the width screen decreases using Css?

问题

It does possible to adjust the width of a div as the width property of the browser is decreasing or increasing using pure Css?

I mean, if I have an element like this in a resolution:

div {
  width: 20%;
}

Then, I want to increase 1% the width of the div for every 10px that I decrease the width browser, it's possible using just Css3?

回答1:

Decreasing width as window is descreased is easy with CSS. Increasing width as window is decreasing is not.

Its possible to use a css only solution, but it will require a wild amount of @media queries:

JS Fiddle (using larger percentage for example)

@media only screen and (max-width: 400px) {
    div {
        width: 20%;
    }
}

@media only screen and (max-width: 390px) {
    div {
        width: 21%;
    }
}

@media only screen and (max-width: 380px) {
    div {
        width: 22%;
    }
}

etc...

CSS doesn't have the logic built in to calculate the width of a viewport AND apply styles based on it without manually doing it with a media query. A js solution would definitely be recommended.

回答2:

This also may help you a combination of the following code and use of calc() in CSS could help.

vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height

Let give it a try with your code.

来源：https://stackoverflow.com/questions/39032122/how-to-grow-the-width-of-a-div-as-the-width-screen-decreases-using-css