CSS Media Queries - Gradual Resizing?

Is there any way to progressively resize using media queries rather than at pre-determined widths? E.g.

Currently I have something like:

@media screen and (max-width: 1024px) { }

Now this will ONLY resize when the window hits that magical 1024px boundary... however, I need it to resize at every stage, not just 1024px.

If the user makes the window 10% narrower then the images and font sizes also need to reduce by 10%.

Is this possible with media queries or am I going to have to go down the JS route for th开发者_如何学Pythonis?

Thanks.

Just make the entire layout flexible. You could then resize the images using width: 90%; (or any value you like), Or use max-width:90%; if you don't want the image to upscale.

Gradually resizing the text is not possible using media queries or css, but you really shouldn't do that. People with smaller windows wouldn't be able to read the text, and people with big screens will have to sit back because the text is to big. Not to mention people using a mobile phone.

Yes, you can do progressively resize using vw, and vh. Do take note of the browser support though.

.h1 {
    font-size: 50vw;
}