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

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>