Responsive Div's Width: 120px on 1200px Screen, 375px on 1920px Screen - css

Question

I want a div to have a width of 120px on 1200px screen (10%) and when resizing the window to 1920px, the width will linearly increase to a width of 375px (around 20%). How can I achieve this without using JS?
I tried using the calc function but I can't think of the right formula to satisfy both.
I don't want to use Media Queries if possible, but if all else fails, what is the cleanest way to do it in Media Queries?

Answer 1

you can archive using #media-query
for example:
#media screen and (min-width: 1920px)
{
div{
width:375px;
}
}
this is how media query works
if you are looking for calc function try something like this , here 25em corresponds to 400px
{
min-width: 50%;
width: calc((25em - 100%) * 1000);
max-width: 100%;
/* Change 25em to your breakpoint. */
}

Answer 2

You could write it something like this:
div {
height: 200px;
width: 120px;
background-color: tomato;
}
#media (min-width: 1200px) {
div {
width: 120px;
}
}
#media (min-width: 1920px) {
div {
width: 375px;
}
}
This is just using a couple of media queries and a default width which is also necessary. I'm not sure why you wouldn't want to use media queries, they're supported in all current browser (and most old browsers too).
Following your comment, you could try doing something with Viewport units (Viewport width in this snippet). Here's an updated example without media queries:
div {
height: 200px;
width: 10vw;
min-width: 120px;
max-width: 375px;
background-color: tomato;
}