CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Cesar Jr Rodriguez
Cesar Jr Rodriguez

Reputation: 1821

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?

Upvotes: 2

Views: 1566

Answers (2)

Majid
Majid

Reputation: 2890

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.

Upvotes: 1

Derek Story
Derek Story

Reputation: 9583

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.

Upvotes: 1

Related Questions