38

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

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

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

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>

4

6 に答える 6

29

コードについては、@Coultonを参照してください。JavaScriptを使用する必要があります。

FitText（IEで動作します、彼らはどういうわけか彼らのサイトをボールにしただけです）またはBigTextのいずれかをチェックアウトしてください。

FitTextを使用すると、コンテナに関連して一部のテキストを拡大縮小できますが、BigTextは、テキストのさまざまなセクションをコンテナ内で同じ幅にサイズ変更することを目的としています。

BigTextは文字列をコンテナの幅に正確に設定しますが、FitTextはピクセルパーフェクトではありません。まず、フォントサイズをコンテナ要素の幅の1/10に設定します。デフォルトではすべてのフォントでうまく機能するわけではありませんが、サイズ変更の「パワー」を増減できる設定があります。また、最小および最大のフォントサイズを設定することもできます。初めて動作するようになるには少し手間がかかりますが、うまく機能します。

http://marabeas.io <-現在ここで遊んでいます。私が理解している限り、BigTextは私のコンテキストではまったく機能しません。

Angularjsを使用している方のために、これが私が作成したFitTextのAngularバージョンです。

@humanityANDpeaceのソリューションをもう少しきれいにするために使用できるLESSミックスインは次のとおりです。

@mqIterations: 19;
.fontResize(@i) when (@i > 0) {
    @media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } }
    .fontResize((@i - 1));
}
.fontResize(@mqIterations);

そして@NIXinのおかげでSCSSバージョン！

$mqIterations: 19;
@mixin fontResize($iterations) { 
    $i: 1; 
    @while $i <= $iterations { 
        @media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } } 
        $i: $i + 1; 
    }
} 
@include fontResize($mqIterations);
于 2012-11-13T10:02:28.503 に答える
6

これは @Patrick の mixin の SCSS バージョンです。

$mqIterations: 19;
@mixin fontResize($iterations)
{
  $i: 1;
  @while $i <= $iterations
  {
    @media all and (min-width: 100px * $i) {
      body { font-size:0.2em * $i; }
    }
    $i: $i + 1;
  }
}
@include fontResize($mqIterations);
于 2014-11-20T01:12:18.983 に答える