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

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的{​​{1}}和height都较大。这样做可能吗？

Answer 1

使用vw怎么样？查看小提琴并调整窗口大小https://jsfiddle.net/d456eLwt/

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;