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

这是FIDDLE

在小提琴中，我手动将font-size设置为5em，将p标签内的文本扩展为段落的完整高度。我想要的是将它设置为根据p标签的高度和宽度进行扩展和缩小，并调整自身以覆盖整个高度。我尝试了％font-size但是不起作用（反正本质上是em，对吗？）。也尝试了像素，但再次固定不流畅。

程序员和设计师的任何想法？

Answer 1

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

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

自动调整字体高度和宽度

1 个答案: