使用纯CSS，是否可以使容器的字体大小与其宽度或高度成比例？

Question

为了使字体始终适合其容器，我总是使用Javascript来制作div或某个class的font-size始终等于它们的width并使用font-size定义它们的内部文本元素。

演示： http ： //jsfiddle.net/pjk8t5kb/

<div class="font-size-equals-width">
    <h1>Here's a headline</h1>
    <p>Here's some paragraph text</p>
</div>

---

.font-size-equals-width
{
    padding: 5%;
    border: 1px solid black;
}

.font-size-equals-width h1 { font-size: 0.2em; }
.font-size-equals-width p { font-size: 0.1em; }

---

function scaleFontSize ( ) 
{
   $('.font-size-equals-width').each(function()
   { 
       var thisContainer = $(this); 
       thisContainer.css('font-size', thisContainer.width().toString() + 'px');
   });    
}

$(window).resize(function ( ) 
{
    scaleFontSize();       
});

$(document).ready(function()
{
    scaleFontSize();   
});

---

我的问题是这是否可以在CSS？ 据我所知，唯一的font-size单位是% ， em ， pt和px ，其中没有一个连接到容器的width或height 。 Bootstrap有什么用的吗？ （我总是在我的项目中包含Bootstrap，但我觉得我没有充分利用它。）

Answer 1

代码笔： http ： //codepen.io/anon/pen/pJBdxP

.font-size-equals-width {
  padding: 5%;
  border: 1px solid black;
  width:50%;
  margin: 0 auto;
}

.font-size-equals-width h1 {
  font-size: 2vw;
}

.font-size-equals-width p {
  font-size: 1vw;
}

尝试这个

希望能帮助到你

Answer 2

好像你想要Viewport Percentage Units： http ： //dev.w3.org/csswg/css-values/#viewport-relative-lengths

此前回答： 基于容器宽度的字体缩放