CODEWITHSUNDEEP
css
ABailiss
ABailiss

Reputation: 173

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 this?

Thanks.

Upvotes: 3

Views: 3418

Answers (2)

user2245534
user2245534

Reputation: 115

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

.h1 {
    font-size: 50vw;
}

Upvotes: 0

Gerben
Gerben

Reputation: 16825

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.

Upvotes: 5

Related Questions