0

いくつかの p タグを含む div があります。

<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 ですよね?)。ピクセルも試しましたが、それは流動的ではなく修正されます。

仲間のプログラマーやデザイナーのアイデアはありますか?

4

1 に答える 1

0

You can change the fontsize to fit for certain viewports, however it wont be exactly what you are looking for.

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;
  }
}
于 2013-09-02T15:18:05.320 に答える