CSS: Is it possible to make a div become wider as the screen width becomes smaller?

user_826511 0
Viewed 114

I want to try to size a div width as an inverse of the screen size, until it hits a maximum of 100%, using only CSS (no JS please).

To be clear, here is an example:

  • if the screen size is 500px wide the div width would be 100%
  • if the screen size is 1000px wide the div would be 50%
  • and so on

I don't want to use media queries because its just too much micromanaging, im hoping for some kind of proportional calc() way of doing this

So far I've been proportionally sizing div widths using 'vw' dimensions which works just fine, but in this case I want to try to do the inverse.

I'm hoping someone has come up with a piece of magic methodology to do this?

css
1 Answers

You can use calc(Xpx - Yvw). The Yvw will grow when the screen is big making the div smaller and the opposite.

Here is a basic example:

.box {
  width:calc(750px - 50vw);
  min-width:50px; /* let's have a minimum boundary */
  max-width:100%; /* and a maximum boundary */
  margin:auto;
  height:50px;
  background:red;
}
<div class="box"></div>

But as I commented, having a div with a fixed size will also do the job visually

.box {
  width:500px;
  max-width:100%;
  margin:auto;
  height:50px;
  background:red;
}
<div class="box"></div>

user_86203330
Related