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


341

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財団3タイポグラフィの例のページそれを圧縮して展開されているように、ヘッダがブラウザに適応します。

私は本当に明白なものを見逃していますか?どうすればこれを達成できますか?


1
こちらをご覧ください:cssでのみレスポンシブフォントサイズhttps://github.com/pavelkukov/Font-Size-Responsive-CSSデモ:http
pavel

2
最初のリンクは古いと思います

OMG、とても多くの複雑な答え。css remを使用するだけです。
ToolmakerSteve

css remは、ビューポートウィンドウに基づいて動的にサイズ変更しません。それを行う必要がある場合は、Javascriptまたは以下の純粋なCSS3回答のいずれかが必要です。これは実際には、大きな見出しテキストに必要なものだけです。
Evan Donovan

@ToolmakerSteveこれは、特にすべてのデバイスで応答性が高いという問題に関しては、非常に単純なことです。remは本当に優れたオプションではありません。「複雑」であるため、答えを無視しているように見えますか?
Emobe

回答:


287

font-sizeブラウザウィンドウのサイズを変更する際、次のように応答しません。あなたが押した場合などその代わり、彼らは、ブラウザのズーム/タイプサイズの設定に対応Ctrlし、+しばらくのブラウザでキーボードの上に一緒に。

メディアクエリ

デザインを壊してスクロールバーを作成し始める特定の間隔でフォントサイズを減らすために、メディアクエリの使用を検討する必要があります。

たとえば、CSSの下部にこれを追加して、デザインが壊れ始めた場所の幅を320ピクセルに変更します。

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

   body { 
      font-size: 2em; 
   }

}

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

また、使用することができ、ビューポートのパーセンテージ長さなどをvwvhvminvmax。これに関する公式のW3Cドキュメントは次のとおりです。

ビューポートのパーセンテージの長さは、最初の包含ブロックのサイズを基準にしています。最初の包含ブロックの高さまたは幅が変更されると、それらはそれに応じてスケーリングされます。

繰り返しますが、同じW3Cドキュメントから、個々のユニットはそれぞれ次のように定義できます。

vw unit-最初の包含ブロックの幅の1%に等しい。

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

vmin単位-vwまたはvhの小さい方に等しい。

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

また、他のCSS値とまったく同じ方法で使用されます。

.text {
  font-size: 3vw;
}

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

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


44
どうfont-size: 1.5vw;ですか?
Dev_NIX 2016

23
さらに良いことfont-size: calc(12px + 1vw)
Cuzox

3
@Dev_NIXどうですか?
Christiaan Westerbeek

1
私は@Cuzoxが提案するものが好きでした-それは私が探していたものです
Eleazar Resendez '20

@Cuzox回答として提出する必要があります。他のソリューションは、テスト方法を小さくして、有用なものにこれらのメソッドを使用できるようにします。そのような静的な高さを組み合わせると、便利になります
ricks

617

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トリックから:ビューポートサイズのタイポグラフィ


2
私は現在、webkitにのみコーディングしています
iamwhitebox 2013


19
すばらしい、vwを使用してテキストを拡大縮小できるので、デスクトップで見栄えが悪くなりません。パーフェクト...ああ。ええと、今ではテキストが小さすぎて電話で見たときに読むことができません。さて、「max(x、y)」を使用して、最小サイズを超えて縮小しないようにすることができます。パーフェクト...ああ。うーん。「最大」はChromeで適切にサポートされていないようです。では、もう一度「px」を使用します。
original_username

10
モバイルではサイズが小さすぎ、高解像度のデスクトップではサイズが大きすぎるため、これは私には実用的ではないようです。
Mr_Green

7
@Mr_Green:そのため、メディアクエリを使用します。小さなビューポートではフォントを大きくし、大きなビューポートではフォントを小さくします。
Alistair

45

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

Internet Explorer 9以降およびCSSのcalc()、rem単位、vmin単位をサポートする他のすべての最新ブラウザー用のアプリケーションを作成できる場合。これを使用して、メディアクエリなしでスケーラブルなテキストを実現できます。

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

ここでそれは動作しています:http : //codepen.io/csuwldcat/pen/qOqVNO


2
ここでの違いは、2つの単位を結合するためにcalcを使用すると、極端なvwテキストスケールの分散をミュートするのに役立つ簡単な方法であることです。
csuwldcat

ビューポートユニットは、古いブラウザとの互換性を必要としないプロジェクトに最適です。この計算トリックは正確にあなたの言うことを実行し、テキストをスムーズにスケーリングします(メディアクエリによって設定された厳密な制限に対抗します)が、画面サイズの変更よりも小さい(または高い!)比率
Ward DS

それをどのように使用すべきですか?つまり、フォントのサイズを変更したい場合、emユニットのみ、vminユニットのみ、またはその両方を変更する必要がありますか?
snoob dogg

私はこの非常に簡単な解決策を書くためにここに来ましたが、あなたの答えを見て+1をしました。このソリューションをすべての要素に適用できます。たとえば、画像の幅:calc(50px + 10vw)
y.selimdogan

35

mediaレスポンシブスタイリングには、CSS 指定子を使用します(これが[zurb]が使用するものです)。

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}


15

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

メディアクエリを使用しますが、いくつかのブレークポイントにはフォントサイズが必要です。

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と同じです。たとえば、ドキュメントのfont-sizeが12 ptの場合、1 emは12 ptと等しくなります。Emは本質的にスケーラブルであるため、2 emは24 pt、.5 emは6 ptに相当します。
  2. パーセント(%):パーセント単位は「em」単位によく似ており、いくつかの基本的な違いを除けます。何よりもまず、現在のfont-sizeは100%に等しくなります(つまり、12 pt = 100%)。パーセント単位を使用している間、テキストはモバイルデバイスとアクセシビリティのために完全に拡張可能です。

kyleschaeffer.com / ....を参照してください

CSS 3は、ビューポートに関連する新しい寸法をサポートしています。ただし、これは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を参照してくださいまた、Can I Use ...も参照してください。


13

レスポンシブフォントサイズには、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;
    }
}

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

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

Lessを使用して開発している場合は、計算を実行するミックスインを作成できます。

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


11

「vw」ソリューションは、非常に小さな画面に行くときに問題があります。基本サイズを設定して、そこからcalc()で上に移動できます。

font-size: calc(16px + 0.4vw);

font-size: calc(1.2rem + 1vw)見出しに使用しました。その方法には、非ピクセルベースのユニットを使用するという利点がありました(ただし、ここでは適用できない場合があります)。また、古いブラウザーのプレーンemsのフォールバックもありました。最後に、モバイルでは少し小さくなったので、メディアクエリを使用しました。複雑すぎるかもしれませんが、私が望んでいたように見えます。
Evan Donovan

8

これは財団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; }
}

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

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ファイルでオーバーライドして、それぞれの画面サイズのフォントサイズを設定できます。


6

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

FlowType-最高のレスポンシブWebタイポグラフィ:要素の幅に基づくfont-size。

または、FitTextと呼ばれるこのJavaScriptコード:

FitText-フォントサイズを柔軟にします。見出しの比率ベースのサイズ変更のためにレスポンシブデザインでこのプラグインを使用します。


6

ビルドツールを使用している場合は、Rucksackを試してください。

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

* {
  /* 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);
}

あなたが話しているリュックサックへの言及はありますか?
Peter Mortensen

5

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

font-sizeを定義された[maximum-size]以下にする方法はありますか?
イゴールヤンコビッチ

4

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

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

次に、calc()を使用して変数とfont-sizeの乗数を使用します。

/* Define a variable based on the orientation. */
/* The 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 a 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>

私の例では、ビューポートの方向のみを使用しましたが、メディアクエリで原則が可能になるはずです。


2
なぜあなたは、単に使用していないvminと、vmaxこれに代えて@media、ビジネス?
Gark Garcia

3

jQueryの「FitText」は、おそらく最高のレスポンシブヘッダーソリューションです。GitHubで確認してください:https : //github.com/davatron5000/FitText.js


2
これは、なぜフォントが調整されないのかという質問に対する直接の回答ではないようです。いずれにせよ、リンクのみの回答はSOでは推奨されません。詳細/サンプルコードの追加を検討してください。
ハリー

2

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

ただし、非常に大きな6.2em見出しが必要なようです。つまり、縦向きモードのモバイルディスプレイ内に収まるようにテキストを縮小する必要があります。あなたの最善の策は、FlowTypeFitTextなどのレスポンシブテキストjQueryプラグインを使用することです。軽量なものが必要な場合は、私のScalable Text jQueryプラグインをチェックしてください。

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

使用例:

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

特にメディアクエリの場合は、これらが設計された目的のために、レスポンシブ使用のためのテキストのスケーリング/テキストのサイズ変更はブラウザに任せる必要があると思います。
user254197

2

実際の元のSass(scssではない)では、以下のミックスインを使用して、段落とすべての見出しを自動的に設定できますfont-size

ずっとコンパクトだから好きです。そして、より速くタイプする。それ以外は、同じ機能を提供します。とにかく、まだ新しい構文-scssに固執したい場合は、ここでSassコンテンツをscssに変換してください:[ここにSASSをSCSSに変換 ]

以下では、4つのSassミックスインを紹介します。必要に応じてそれらの設定を微調整する必要があります。

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a 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つのミックスインを呼び出します。つまり、+ 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 placeholder 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

必要に応じてすべてのMIXINSを構成します-ITで遊んでください!:)次に、実際の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

私はこれらの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
 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; }

6
このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の質を高めるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
トニーババリノ2016

説明が正しいでしょう。
Peter Mortensen

1

これを実現する方法は次のとおりです。

  1. たとえば2.3 remにはremを使用します
  2. たとえば2.3emにはemを使用します
  3. たとえば2.3%の場合は%を使用します。さらに、vh、vw、vmax、vminを使用できます。

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


1

フォントサイズをvw(ビューポートの幅)で定義すると、フォントサイズを敏感にすることができます。ただし、すべてのブラウザでサポートされているわけではありません。解決策は、JavaScriptを使用して、ブラウザーの幅に応じて基本フォントサイズを変更し、すべてのフォントサイズを%で設定することです。

レスポンシブフォントサイズを作成する方法を説明した記事は次のとおりです。http://wpsalt.com/responsive-font-size-in-wordpress-theme/


リンクが壊れているようです:"403 Forbidden。nginx / 1.10.3"
Peter Mortensen

1

私はこの解決策を見つけました、そしてそれは私にとって非常にうまくいきます:

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

デスクトップとモバイル/タブレットの両方でテキストの見栄えがよくなる問題を解決する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

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

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sensitive_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

次の方程式を使用します。

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

1440および768よりも大きいか小さい場合は、静的な値を指定するか、同じアプローチを適用できます。

vwソリューションの欠点は、スケール比を設定できないことです。たとえば、画面解像度1440で5vwは、フォントサイズが60pxになる可能性がありますが、ウィンドウの幅を768に縮小すると、結果的に12pxであり、必要な最小サイズではありません。

このアプローチを使用すると、上限と下限を設定でき、フォントはその間に自動的に拡大縮小されます。


1

cssからcalc()を使用できます

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

数式は、calc(minsize +(maxsize-minsize)*(100vm-minviewportwidth)/(maxwidthviewoport-minviewportwidth)))です。

Codepen


0

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

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

font-size幅が300ピクセルと200ピクセルの両方で3emになります。ただしfont-size、完璧なレスポンシブを実現するには、200pxの幅を小さくする必要があります。

それで、本当の解決策は何ですか?方法は1つだけです。テキストを含むPNG画像(背景が透明)を作成する必要があります。その後、画像を簡単にレスポンシブにすることができます(例:幅:35%、高さ:28ピクセル)。このようにして、テキストはすべてのデバイスで完全に応答します。


0

多くの結論の後、私はこの組み合わせで終わりました:

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

    h2 {
        font-size: 4.3vw;
    }
}


-1

ここに私のために働いたものがあります。iPhoneでのみテストしました。

、、タグのいずれを使用する場合でもh1、これをテキストの周囲に配置します。h2p

<h1><font size="5">The Text you want to make responsive</font></h1>

これにより、デスクトップ上に22ptのテキストが表示され、iPhoneでも読み取り可能です。

<font size="5"></font>

14
これは2015年です。フォントタグはHTML5で非推奨になりました。
Dan H

私は、フォントタグが時代遅れだと思ったdeveloper.mozilla.org/en-US/docs/Web/HTML/Element/font私はそれがまだ廃止予定はないと思うが、それはいくつかのポイントになります。
2015

1
@Jake:HTML4では非推奨でしたが、HTML5では廃止されました。削除は非推奨の後に行われ、その逆は行われません。
santon 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.