html - 自动调整字体高度和宽度

Question

我有一个 div，里面有几个 p 标签。

<div id="myDiv">
    <p>abcdefgh ijkl mnop</p>
    <p>qrst uvwxyz</p>
</div>

和 CSS

div#myDiv{
    display: inline-block;
}

div#myDiv p{
    padding: 0;
    height: 100px;
    min-width: 250px;
    line-height: 100px;
    background: Green;
    font-size: 5em;
}

这是一个小提琴

在小提琴中，我手动将 font-size 设置为 5em，这会将 p 标签内的文本扩展到段落的全高。我想要的是设置它，使其根据 p 标签的高度和宽度进行扩展和收缩，并自行调整以覆盖整个高度。我试过 % font-size 但这不起作用（本质上是 em，对吧？）。还尝试了像素，但这又会被固定而不是流动的。

程序员和设计师有什么想法吗？

Answer 1

您可以更改字体大小以适合某些视口，但它不会完全符合您的要求。

div#myDiv p{
  font-size: 5em;
}

@media(max-width: 767px){
  //if the width of the screen is lower than 767px
  div#myDiv p{
    font-size: 4em;
  }
}

@media(max-width: 500px){
  div#myDiv p{
    font-size: 3em;
  }
}

@media(max-width: 400px){
  div#myDiv p{
    font-size: 2em;
  }
}