size according to device

2018-07-01 09:15:51

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.

You can use viewport widths and heights in CSS:

.vwHeight {font-size: 5.9vw;}

A preview of the same would be:

More info on Viewport Sized Typography.

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

for example:-

.block {font-size: 5vw;}

.block {font-size: 5vmax;}

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

URL

链接地址: http://www.djcxy.com/p/87530.html

上一篇: 使用JavaScript添加setTimeout UL菜单