☰

divサイズに応じてフォントサイズを変更する [重複] 質問する

tag-icon • tag-icon css responsive-design
divサイズに応じてフォントサイズを変更する [重複] 質問する

これは 9 つのボックスで構成されており、中央にテキストが入っています。ボックスは画面のサイズに合わせてサイズが変更されるように作成されているため、常に同じ場所に残ります。

ただし、パーセンテージを使用しても、テキストのサイズは変更されません。

  1. ページ全体で常に同じ比率になるようにテキストのサイズを変更するにはどうすればよいですか?
  2. これは複数の解像度を処理するための適切なソリューションでしょうか? それとも、@mediaCSS に多くのチェックを入れて、メディア タイプごとに多くのレイアウトを用意する必要がありますか?

html,
body {
  height: 100%;
  width: 100%;
}

#launchmain {
  width: 55%;
  display: inline-block;
  position: relative;
  top: 10%;
  left: 25%;
}

#launchmain:after {
  padding-top: 79.26%;
  display: block;
  content: '';
  margin-top: 10px;
}

#box1 {
  border: 1px solid #000000;
  position: absolute;
  width: 25.37%;
  height: 21.88%
}

#box2 {
  border: 1px solid #000000;
  width: 48.48%;
  height: 21.88%;
  position: absolute;
  left: 25.64%
}

#box3 {
  border: 1px solid #000000;
  width: 25.37%;
  height: 21.88%;
  position: absolute;
  left: 74.39%;
}

#box4 {
  border: 1px solid #000000;
  width: 33.235%;
  height: 53.84%;
  position: absolute;
  top: 22.07%;
}

#maininvite {
  border: 1px solid #000000;
  width: 33.53%;
  height: 53.84%;
  position: absolute;
  top: 22.07%;
  left: 33.235%;
}

#box6 {
  border: 1px solid #000000;
  width: 33.235%;
  height: 53.84%;
  position: absolute;
  top: 22.07%;
  left: 66.765%;
}

#box7 {
  border: 1px solid #000000;
  width: 25.37%;
  height: 21.88%;
  position: absolute;
  top: 76.2%;
}

#box8 {
  border: 1px solid #000000;
  width: 48.48%;
  height: 21.88%;
  position: absolute;
  left: 25.64%;
  top: 76.2%;
}

#box9 {
  border: 1px solid #000000;
  width: 25.37%;
  height: 21.88%;
  position: absolute;
  top: 76.2%;
  left: 74.39%;
}

#maininvite h2 {
  font-size: 180%;
}

p {
  position: relative;
  font-size: 80%;
}
<div id="launchmain">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
  <div id="maininvite">
    <h2> header</h2>
    <p>not a lot of text here but still overflowing</p>
  </div>
  <div id="box6"></div>
  <div id="box7"></div>
  <div id="box8"></div>
  <div id="box9"></div>
</div>

ベストアンサー1

私の答えは、Javascript を必要とせず、CSS3 (ほとんどの最新ブラウザで利用可能) のみに依存します。個人的には、デザインが Javascript にあまり依存していないのが気に入っています。

私の答えは「純粋な CSS3 、 Javascript は不要」-解決：

解決策はここにあります（http://jsfiddle.net/uNF3Z/16/) は、CSS スタイルに次の追加を使用します ( @mediaCSS3 のクエリを使用します)

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

これによって、フォント サイズが利用可能な画面幅に合わせて調整されます。この調整は 100 ピクセル単位で行われ (ほとんどの用途では十分な細かさです)、最大画面幅 1700 ピクセルをカバーします。これは十分であると考えられます (2013 年)。さらに行を追加することで、さらに改善できます。

副次的な利点は、フォント サイズの調整がサイズ変更のたびに行われることです。この動的な調整 (たとえば、ブラウザー ウィンドウのサイズが変更されるため) は、Javascript ベースのソリューションではまだカバーされていない可能性があります。

おすすめ記事