web-dev-qa-db-ja.com

divサイズに従ってfont-sizeのサイズを変更します

これを作りました jsfiddle

html：

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

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

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

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

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

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

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

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

BigTextは、文字列をコンテナの幅に正確に設定しますが、FitTextはピクセル単位では完璧ではありません。まず、font-sizeをコンテナ要素の幅の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);
25
Patrick

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

私の答えは「純粋なCSS3、Javascriptは不要」-ソリューションです：

ここに見られる解決策（ http://jsfiddle.net/uNF3Z/16/ ）は、CSSスタイルに次の追加を使用します（@media CSS3のクエリwhich）

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

これが実際に引き起こすことは、フォントサイズが利用可能な画面幅に調整されることです。この調整は100px（ほとんどの目的に対して十分にきめ細かい）のステップで行われ、1700pxの最大画面幅をカバーします。これは十分（2013年）であり、さらに行を追加することでさらに改善できます。

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

65
humanityANDpeace

私は同じ機能を探していて、この答えを見つけました。しかし、皆さんに簡単なアップデートを提供したかったのです。 CSS3のvminユニットです。

p, li
{
  font-size: 1.2vmin;
}

vminは、「ViewPortの高さの1％とViewPortの幅の1％のうち小さい方」を意味します。

SitePointの詳細

20
amenadiel

私が提示している答えは、「px」、「em」、または「％」を使用する代わりに、「vw」を使用する非常に簡単です。一言で言えば、次のようになります。-見出しの目的で使用される場合、h1 {font-size：5.9vw;}。

こちらをご覧ください： デモ

詳細： メインチュートリアル

8
Abhishek Sen

これが@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);
5
niieani