如何根据父元素的大小制作动态字体大小？

Question

Here is my code:

 ul { list-style-type: none; white-space:nowrap; } li { padding: 5px; border: 1px solid; display:inline-block; width:50px; height: 20px; text-align: center; } 

 <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 

I didn't set font-size property to it. Now I want to know, can I set a dynamic font-size to it? I mean, I want a bigger font-size for this one:

 ul { list-style-type: none; white-space:nowrap; } li { padding: 5px; border: 1px solid; display:inline-block; width:90px; height: 25px; text-align: center; } 

 <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 

Because of bigger both width and height for <li> in second code snippet. Is doing that possible?

Answer 1

What about using vw ? See fiddle and resize the window https://jsfiddle.net/d456eLwt/

 ul { list-style-type: none; white-space:nowrap; } li { padding: 5px; border: 1px solid; display:inline-block; width: 20vw; font-size: 5vw; line-height: 5vw; height: 5vw; text-align: center; } 

 <ul> <li>one</li> <li>two</li> <li>three</li> </ul>