如何根據父元素的大小制作動態字體大小？

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>