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

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>

由於在第二代碼片段既大且width爲height<li>。這樣做有可能嗎？

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>