web-dev-qa-db-ja.com

CSSのレスポンシブフォントサイズ

Zurb Foundation 3 グリッドを使用してサイトを作成しました。各ページには大きなh1があります。

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

ブラウザのサイズをモバイルサイズに変更すると、大きいフォントは調整されず、大きいテキストに合わせてブラウザに水平スクロールが表示されます。

Zurb Foundation 3 Typography example page では、ヘッダーがブラウザに合わせて圧縮および拡張されるため、ヘッダーがそのブラウザに適応します。

私は本当に明白な何かが足りないのですか？どうやってこれを達成できますか？

cssresponsive-designfont-sizezurb-foundationem
306
user2213682

font-sizeはブラウザウィンドウのサイズを変更してもこのようには反応しません。代わりに、ブラウザのズーム/タイプサイズ設定に応答します。 ctrl そして + ブラウザにいる間、キーボードで一緒に。

メディアクエリ

あなたはそれがあなたのデザインを壊しそしてスクロールバーを作り始める特定の間隔でフォントサイズを減らすために メディアクエリー を使うことを見なければならないでしょう。

たとえば、CSSの下部の一番下にこれを追加して、デザインが壊れ始める場所に合わせて320pxの幅を変更します。

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

ビューポートのパーセンテージ長

vw、vh、vmin、およびvmaxなどの ビューポートのパーセント長 を使用することもできます。これに関する公式のW3C文書は次のように述べています。

ビューポートパーセンテージの長さは、最初の包含ブロックのサイズに比例します。最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大縮小されます。

繰り返しになりますが、同じW3C文書から、それぞれの個々の単位は以下のように定義できます。

vw単位 - 最初の包含ブロックの幅の1％に等しい。

vh unit - 最初の包含ブロックの高さの1％に等しい.

vmin単位 - vwまたはvhの小さい方と同じです。

vmax単位 - vwまたはvhの大きい方に等しい。

そしてそれらは他のCSS値と全く同じように使われます。

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

見てわかるように、互換性は比較的優れています ここ 。ただし、IEおよびEdgeのバージョンによっては、vmaxをサポートしていません。また、iOS 6と7にはvhユニットに関する問題があり、これはiOS 8で修正されました。

266
Peter Featherstone

Ems、pxs、またはptsの代わりにビューポート値を使用できます。

1vw =ビューポート幅の1％

1vh =ビューポートの高さの1％

1vmin = 1vwまたは1vh、小さい方

1vmax = 1vwまたは1vhのどちらか大きい方

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

cssトリックから： http://css-tricks.com/viewport-sized-typography/ /

605
SolidSnake

レスポンシブスタイリングにはCSSのmedia指定子（それが使うものです）を使います：

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}
35
Albert Xing

私はこの問題を克服する方法を試してきました、そして私が解決策を見つけたと信じています：

あなたがIE9 +とCSS calc（）、remユニット、そしてvminユニットをサポートする他のすべての最近のブラウザのためにあなたのアプリを書くことができるなら、あなたはメディア質問なしでスケール可能なテキストを達成するためにこれを使うことができます：

body {
  font-size: calc(0.75em + 1vmin);
}

これが実行中です： http://codepen.io/csuwldcat/pen/qOqVNO

33
csuwldcat

JQueryソリューションを使用しても構わない場合は、TextFillプラグインを試すことができます。

jQuery TextFillはテキストをコンテナに収まるようにサイズ変更し、フォントサイズを可能な限り大きくします。

https://github.com/jquery-textfill/jquery-textfill

29
Javi Stolz

これを達成するにはいくつかの方法があります。

media query を使用しますが、いくつかのブレークポイントにはフォントサイズが必要です。

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}

％またはem の寸法を使用してください。基本フォントサイズを変更するだけで、すべてが変更されます。以前のものとは異なり、毎回h1ではなくボディフォントを変更するか、ベースフォントサイズをデバイスのデフォルトにしてすべてをemに固定することができます。

  1. "Ems"（em） ： "em"はスケーラブルな単位です。 emは現在のfont-sizeと同じです。たとえば、ドキュメントのフォントサイズが12ptの場合、1emは12ptになります。 Emsは本質的にスケーラブルなので、2emは24pt、0.5emは6ptになります。
  2. パーセント（％） ：パーセントの単位は「em」の単位とよく似ていますが、いくつか基本的な違いはありません。まず第一に、現在のフォントサイズは１００％に等しい（すなわち１２ｐｔ ＝ １００％）。パーセント単位を使用している間、あなたのテキストはモバイル機器とアクセシビリティのために十分に拡大縮小可能です。

see kyleschaeffer.com/....

CSS3 はビューポートを基準にした新しい寸法をサポートします。しかし、これはAndroidでは動作しません

  1. 3.2vw =ビューポートの幅の3.2％
  2. 3.2vh =ビューポートの高さの3.2％
  3. 3.2vmin = 3.2vwまたは3.2vhの小さい方

  4. 3.2vmax = 3.2vwまたは3.2vhより大きい

    body
{
    font-size: 3.2vw;
}

css-tricks.com/.... を参照し、さらに caniuse.com/.... を参照してください。

14
aWebDeveloper

非常に小さな画面に行くとき "vw"ソリューションは問題を抱えています。あなたはベースサイズを設定し、そこからcalc（）で上がることができます：

font-size: calc(16px + 0.4vw);
9
Tautvydas Bagdžius

レスポンシブフォントサイズへのもう一つのアプローチがあります - rem単位を使うこと。

html {
    /* base font size */
    font-size: 16px;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

後のメディアクエリでは、基本フォントサイズを変更することですべてのフォントサイズを調整できます。

@media screen and (max-width: 767px) {
  html {
    /* reducing base font size will reduce all rem sizes */
    font-size: 13px;
  }

    /* you can reduce font sizes manually as well*/
    h1 { font-size: 1.2rem; }
    h2 { font-size: 1.0rem; }

}

IE7-8でこれを機能させるには、px単位のフォールバックを追加する必要があります。

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

あなたがLESSで開発しているなら、あなたはあなたのために数学をするミックスインを作成することができます。

レムユニットのサポート - http://caniuse.com/#feat=rem

9
Yuri P.

これは基礎5で部分的に実行されています。

_type.scssでは、2組のヘッダー変数があります。

// We use these to control header font sizes
//for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

ミディアムアップの場合、それらは変数の最初のセットに基づいてサイズを生成します。

@media #{$medium-up} {
      h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
      h1 { font-size: $h1-font-size; }
      h2 { font-size: $h2-font-size; }
      h3 { font-size: $h3-font-size; }
      h4 { font-size: $h4-font-size; }
      h5 { font-size: $h5-font-size; }
      h6 { font-size: $h6-font-size; }
    }

また、デフォルトの小さな画面の場合、cssを生成するために2番目の変数セットを使用します。

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

これらの変数を使用してカスタムscssファイルで上書きして、それぞれの画面サイズにフォントサイズを設定できます。

8
Sudheer

レスポンシブフォントサイズは、 FlowType と呼ばれるこのJavaScriptでも実行できます。

FlowType - レスポンシブWebタイポグラフィ：要素幅に基づくフォントサイズ。

あるいは、このJavaScriptは FitText ：と呼びました。

FitText - フォントサイズを柔軟にします。このプラグインをレスポンシブデザインに使用して、見出しの比率に基づいたサイズ変更を行うことができます。

6
phlegx

ビルドツールを使っているのなら、Rucksackを試してください。

それ以外の場合は、CSS変数（カスタムプロパティ）を使用して、最小および最大フォントサイズを簡単に制御できます（ demo ）。

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}
5
Dannie Vinther

jQueryの "FitText"はおそらく最も応答の良いヘッダーソリューションです。 Githubでそれをチェックしてください： https://github.com/davatron5000/FitText.js

3
Raghav Kukreti

Scssではなく実際のオリジナルのsassでは、下のmixinを使って段落とすべての見出しのフォントサイズを自動的に設定できます。

それははるかにコンパクトなので私はそれが好きです。そしてより速くタイプします。それ以外は同じ機能を提供します。とにかくあなたがまだ新しい構文に固執したいならば - scssそれからここに私のsassをscssに自由に変換してください： [ここからSCSSへの変換]

以下に私はあなたに4つのサスミックスインをあげます。あなたはあなたのニーズに合わせて設定を微調整しなければならないでしょう。

=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in media query
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // this one only calls the other ones

あなたが設定で遊んだ後は、ただ1つのmixinを呼び出してください - それは + config-and-run-font-generator（） です。詳細については、以下のコードとコメントを参照してください。

私はあなたがそれがヘッダータグのためにされるようにあなたがメディアクエリのためにそれを自動的にすることができると思います、しかし我々は皆異なったメディアクエリを使うのでそれはみんなのために適切ではないでしょう。私はモバイルファーストデザインアプローチを使用するので、これが私がそうする方法です。このコードをコピーして使用してください。

これらのミックスをコピーしてファイルに貼り付けます。

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // set first header element to this size
  $h1-step-down: $h1-step-down // decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // just a place holder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // set all parameters here

すべてのMIXINを自分のニーズに合わせて設定 - それを使ってプレイしよう！ :)そしてそれをあなたの実際のSASSコードの上にそれを呼び出す：

+config-and-run-font-generator()

これはこの出力を生成します。パラメータをカスタマイズしてさまざまな結果セットを生成することができます。ただし、すべてのメディアインクエリーを使用するため、手動で編集する必要があるミックスイン（スタイルとメディア）があります。

生成されたCSS：

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  Word-wrap: break-Word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em; 

}
2
DevWL

多くのフレームワークと同様に、一度 "グリッドから外れて"フレームワークのデフォルトCSSをオーバーライドすると、左右が壊れ始めます。フレームワークは本質的に厳格です。 ZurbのデフォルトのH1スタイルをデフォルトのグリッドクラスと一緒に使用する場合は、Webページはモバイルで適切に表示されるはずです（つまりレスポンシブ）。

ただし、非常に大きな6.2emの見出しが必要なようです。これは、縦向きモードでモバイルディスプレイ内に収まるようにテキストを縮小する必要があることを意味します。あなたの最善の策は、 FlowType や FitText のようなレスポンシブテキストのjQueryプラグインを使うことです。軽量のものが欲しいなら、私のScalable Text jQueryプラグインを調べてください。

http://thdoan.github.io/scalable-text/

使用例

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>
2
thdoan

この解決策を見つけてください、私のためにとてもよく働きます。

/* fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
1
Buzz

これを実現するには、以下の方法があります。

  1. 例えばremを使う2.3レム
  2. 例えばemを使う2.3em
  3. 例えばに％を使用2.3％さらに、あなたは使うことができます：vh、vw、vmaxとvmin。

これらの単位は、画面の幅と高さに応じて自動サイズ変更されます。

1
Priyanshu Tiwari

テキストの問題を解決してデスクトップとモバイル/タブレットの両方で見栄えをよくする1つの方法は、テキストのサイズを物理的なセンチメートルやインチなどの物理単位に固定することです。これは画面PPI（インチあたり）。

この回答 に基づいて、レスポンシブフォントサイズのためにHTMLドキュメントの最後で使用するコードを以下に示します。

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

上記のコードでは、ブラウザ/ OSが画面のPPIに対して正しく構成されている限り、異なるクラスのアイテムに物理単位のフォントサイズが割り当てられます。物理単位フォントは、画面までの距離が通常であれば（読書距離）、大きすぎたり小さすぎたりすることはありません。

1
Serge Rogatch
 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }
1
King Rayhan

私はこれが古い質問であることを知っています、私は同じ質問を持っていました、そしてグーグルで調べた後、私は CSS-Tricks から素晴らしい記事を見ました。それはうまく機能します。それが役立つことを願っています：

body {
 font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - 
 [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

例えば：

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

同じ式をline-heightプロパティに適用して、ブラウザで変更することもできます。

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
1
heyjr

要素ごとにフォントサイズを1回定義するだけでいいというアイデアを思いついたのですが、それでもメディアクエリの影響を受けます。

最初に、メディアクエリを使用して、ビューポートに応じて変数 "--text-scale-unit"を "1vh"または "1vw"に設定します。

それから私はcalc（）を使った変数とfont-sizeのための私の乗数を使います。

/* Define variable based on the orientation. */
/* value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root{
    --text-scale-unit: 1vw;
  }
}


/* Use Variable with calc and multiplication. */
.large{
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle{
  font-size: calc(var(--text-scale-unit) * 10);
}
.small{
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small{
  font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
  Responsive 
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

私の例では、ビューポートの向きだけを使用しましたが、どのようなメディアクエリでも原則は可能です。

どうやってこのアイデアを見つけますか？

1
Christian Groothoff

テキストサイズはvw単位で設定できます。これは "ビューポート幅"を意味します。そうすることで、テキストサイズはブラウザウィンドウのサイズに従います。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

私の個人的なプロジェクトのために私はvwと@meidaを使いましたそれは完璧に働きます

.mText {
    font-size: 6vw;

}


@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
  }


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
  }
1
user10154568

フォントサイズをvw（ビューポート幅）で定義すれば、フォントサイズをレスポンシブにすることができます。しかし、すべてのブラウザがそれをサポートしているわけではありません。解決策はJSを使用してブラウザの幅に応じて基本フォントサイズを変更し、すべてのフォントサイズを％で設定することです。以下はレスポンシブフォントサイズの作り方を説明した記事です： http://wpsalt.com/responsive-font-size-in-wordpress-theme/

1
Dmitry Pochtennykh

私はこのCSSクラスを使っています、私のテキストはどんなスクリーンサイズでも流動的にしてください： 

.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}
1
Buzz

フォントのサイズ変更に関しては簡単な解決策はありません。メディアクエリを使用してフォントサイズを変更できますが、技術的にはスムーズにサイズ変更されません。例として、あなたが使用する場合：

@media only screen and (max-width: 320px){font-size: 3em;}

あなたのフォントサイズは300pxと200px幅の両方で3emになります。しかし、あなたは完璧に反応させるために200px幅のためにもっと小さいフォントサイズが必要です。

それで、本当の解決策は何ですか？唯一の方法があります。あなたはあなたのテキストを含むpng（透明な背景を持つ）画像を作成しなければなりません。その後、あなたは簡単にあなたのイメージを敏感にすることができます（例：幅：35％;高さ：28px）。このようにしてあなたのテキストは完全にすべてのデバイスと反応するでしょう。

0
user1712287
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

この式を使ってください。

1440と768よりも大きい、または小さいものには、静的な値を指定するか、同じ方法を適用できます。

Vwソリューションの欠点は、画面の解像度1440で5vwがあなたのアイデアのフォントサイズである60pxのfont-sizeになるかもしれないと言っても、倍率を設定できないことです。 12pxであること、あなたが望む最小限ではありません。この方法では、上限と下限を設定でき、フォントはその間で拡大縮小されます。

0
Shuwei

多くの結論を出した後、私はこの組み合わせに行き着きました

@media only screen and (max-width: 730px) {

 h2{
        font-size: 4.3vw;
    }

}
0
Harsh Gupta