CODEWITHSUNDEEP
css
Dinis Figueira
Dinis Figueira

Reputation: 57

Dynamic font-size according to device

Small question, for which I can't find any answer. Is there a way to do this?

I have 3 elements with different sizes. One with 30px, other with 22px and other with 16px. Now, when using a tablet to check this elements, they go off limits since I need to have my container with fixed height. Is there a way, using media-queries, to decrease their font-size according to device without doing one by one? Like it's 100% in desktop, 80 in tablet, etc..

Thank you very much.

Upvotes: 0

Views: 228

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You can use viewport widths and heights in CSS:

.vwHeight {font-size: 5.9vw;}

A preview of the same would be:


(source: css-tricks.com)

More info on Viewport Sized Typography.

Upvotes: 2

Mukul Kant
Mukul Kant

Reputation: 7122

You can use vw , vmax , vmin or em here is many CSS Units which can helps you.

for example:-

.block {font-size: 5vw;}

or 

.block {font-size: 5vmax;}

you should go with below link and I am sure it will helps you.

URL

Upvotes: 0

Related Questions