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

Question

这是我的代码：

 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> 

我没有设置font-size属性。 现在我想知道，我可以为其设置动态font-size吗？ 我的意思是，我想要一个更大的font-size ：

 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> 

由于第二个代码段中<li> width和height都较大。 有可能吗？

Answer 1

使用vw呢？ 查看小提琴并调整窗口大小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>