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

【问题标题】：How can I make a dynamic font-size base on parent element's size?如何根据父元素的大小制作动态字体大小？
【发布时间】：2017-06-29 17:12:12
【问题描述】：

这是我的代码：

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>

因为第二个代码 sn-p 中的 width 和 height 都更大。这样做可以吗？

【问题讨论】：

标签： javascript jquery html css font-size

【解决方案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>

【讨论】：