ZurbFoundation3グリッドを使用してサイトを作成しました。各ページには大きなものがあります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のタイポグラフィの例のページで、ブラウザが圧縮および展開されるときに、ヘッダーがブラウザに適応することに気づきました。
私は本当に明白な何かを逃していますか？どうすればこれを達成できますか？
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から-トリック：ビューポートサイズのタイポグラフィ
ブラウザウィンドウのサイズを変更すると、はこのfont-sizeように応答しません。代わりに、ブラウザ内でキーボードを押しCtrlて一緒に押す場合など、ブラウザのズーム/タイプサイズの設定に応答します。+
メディアクエリ
メディアクエリを使用して、デザインを壊し、スクロールバーを作成し始める特定の間隔でフォントサイズを縮小することを検討する必要があります。
たとえば、CSSの下部にこれを追加して、デザインが壊れ始めた場所の幅を320ピクセルに変更してみてください。
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
ビューポートのパーセンテージの長さ
、、、などのビューポートのパーセンテージの長さを使用することもできます。このための公式のW3C文書は次のように述べています。vwvhvminvmax
ビューポートのパーセンテージの長さは、最初に含まれているブロックのサイズを基準にしています。最初の包含ブロックの高さまたは幅が変更されると、それに応じてスケーリングされます。
この場合も、同じW3Cドキュメントから、個々のユニットを次のように定義できます。
vw unit-最初の包含ブロックの幅の1％に等しい。
vh unit-最初の包含ブロックの高さの1％に等しい。
vminunit-vwまたはvhの小さい方に等しい。
vmaxunit-vwまたはvhの大きい方に等しい。
そして、それらは他のCSS値とまったく同じ方法で使用されます。
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
ここに見られるように、互換性は比較的良好です。ただし、InternetExplorerおよびEdgeの一部のバージョンはvmaxをサポートしていません。また、iOS 6および7には、iOS8で修正されたvhユニットの問題があります。
私はこの問題を克服する方法を試してきましたが、解決策を見つけたと信じています。
Internet Explorer 9（およびそれ以降）およびCSS calc（）、remユニット、およびvminユニットをサポートする他のすべての最新ブラウザー用のアプリケーションを作成できる場合。これを使用して、メディアクエリなしでスケーラブルなテキストを実現できます。
body {
font-size: calc(0.75em + 1vmin);
}
ここで動作しています：http：//codepen.io/csuwldcat/pen/qOqVNO
応答性の高いスタイリングにはCSSmedia指定子（[zurb]が使用するもの）を使用します。
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
私の方法はあなたの問題を解決するための最良のアプローチを持っていると言えます
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
ここclampに3つの引数があります。
最初のものは、許可される最小のフォントサイズです。
3つ目は、最大許容フォントサイズです。
2番目の引数は、常に使用したいフォントサイズです。その単位は相対的（vw、vh、ch）であり、絶対的（つまり、px、mm、ptではない）ではありません。相対単位は、画面サイズの変更に応じてサイズを変更します。
例を考えてみましょう：動的にサイズを変更したい大きなfontawesomeアイコンがあると考えてください（レスポンシブアイコン）
fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
すなわち
特定のモバイル画面サイズで80vw<15remの場合、font-sizeは15remです。
画面が広すぎる場合、80vw> 80vhの場合、font-sizeは80vhです。
人々によって提案された上記の方法は、常に少し不確実な結果をもたらします...私たち
vwだけを使用する場合のように、フォントサイズが大きすぎたり小さすぎたり（無制限）する場合があります。
mediaクエリを使用できますが、フォントサイズを最低3つのメディアクエリで制限する必要があります
jQueryソリューションを使用してもかまわない場合は、TextFillプラグインを試すことができます
jQuery TextFillは、コンテナに収まるようにテキストのサイズを変更し、フォントサイズを可能な限り大きくします。
これを達成する方法はいくつかあります。
メディアクエリを使用しますが、いくつかのブレークポイントのフォントサイズが必要です。
body
{
font-size: 22px;
}
h1
{
font-size: 44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}
％またはemの寸法を使用します。基本フォントサイズを変更するだけで、すべてが変更されます。前のものとは異なり、毎回h1ではなく本文のフォントを変更するか、ベースのフォントサイズをデバイスのデフォルトにし、残りをすべて次のようにすることができますem。
kyleschaeffer.com/...を参照してください。
CSS 3は、ビューポートを基準にした新しいディメンションをサポートします。しかし、これはAndroidでは機能しません。
3.2vmax=3.2vwまたは3.2vhの大きい方
body
{
font-size: 3.2vw;
}
CSS-Tricks...を参照してください。またCanIUse...も参照してください。
レスポンシブフォントサイズには、レム単位を使用する別のアプローチがあります。
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;
}
}
これをInternetExplorer7およびInternetExplorer8で機能させるには、px単位でフォールバックを追加する必要があります。
h1 {
font-size: 18px;
font-size: 1.125rem;
}
Lessで開発している場合は、計算を行うミックスインを作成できます。
レムユニットのサポート-http://caniuse.com/#feat=rem
「vw」ソリューションには、非常に小さな画面に移動するときに問題があります。基本サイズを設定し、calc（）を使用してそこから上に移動できます。
font-size: calc(16px + 0.4vw);
これは、Foundation5で部分的に実装されています。
ファイル_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ファイルでオーバーライドして、それぞれの画面サイズのフォントサイズを設定できます。
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)));
}
応答性の高いフォントサイズは、 FlowTypeと呼ばれるこのJavaScriptコードを使用して実行することもできます。
FlowType-応答性の高いWebタイポグラフィ。要素の幅に基づくフォントサイズ。
または、 FitTextと呼ばれるこのJavaScriptコード：
FitText-フォントサイズを柔軟にします。レスポンシブデザインでこのプラグインを使用して、見出しの比率ベースのサイズ変更を行います。
ビルドツールを使用している場合は、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);
}
要素ごとに1回だけフォントサイズを定義するというアイデアを思いついたばかりですが、それでもメディアクエリの影響を受けます。
まず、メディアクエリを使用するビューポートに応じて、変数「--text-scale-unit」を「1vh」または「1vw」に設定します。
次に、calc（）を使用して変数を使用し、フォントサイズに乗数を使用します。
/* 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>私の例では、ビューポートの向きのみを使用しましたが、原則はどのメディアクエリでも可能であるはずです。
jQueryの「FitText」はおそらく最も応答性の高いヘッダーソリューションです。GitHubでチェックしてください： https ：//github.com/davatron5000/FitText.js
実際の元の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
必要に応じてすべてのミックスインを構成します-それで遊んでください！:)そして、実際の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;
}
私はこれらの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);
}
cssからcalc（）を使用できます
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
数式はcalc（minsize +（maxsize-minsize）*（100vm-minviewportwidth）/（maxwidthviewoport-minviewportwidth）））です。
これをスタイルシートに含めてみてください。
html {
font-size: min(max(16px, 4vw), 22px);
}
詳細については、https： //css-tricks.com/simplified-fluid-typography/をご覧ください。
多くのフレームワークと同様に、「グリッドから外れて」フレームワークのデフォルトのCSSをオーバーライドすると、物事は左右に壊れ始めます。フレームワークは本質的に堅固です。ZurbのデフォルトのH1スタイルをデフォルトのグリッドクラスとともに使用する場合、Webページはモバイルで適切に表示される必要があります（つまり、レスポンシブ）。
ただし、非常に大きな6.2emの見出しが必要なようです。つまり、縦向きモードのモバイルディスプレイ内に収まるようにするには、テキストを縮小する必要があります。最善の策は、FlowTypeやFitTextなどのレスポンシブテキストjQueryプラグインを使用することです。軽量なものが必要な場合は、私のスケーラブルテキストjQueryプラグインをチェックしてください。
http://thdoan.github.io/scalable-text/
使用例：
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
vw（ビューポート幅）でフォントサイズを定義すると、フォントサイズをレスポンシブにすることができます。ただし、すべてのブラウザがサポートしているわけではありません。解決策は、JavaScriptを使用して、ブラウザーの幅に応じて基本フォントサイズを変更し、すべてのフォントサイズを％で設定することです。
レスポンシブフォントサイズを作成する方法を説明する記事は次のとおりです：http ：//wpsalt.com/sensitive-font-size-in-wordpress-theme/
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; }
これを実現するには、次の方法があります。
これらのユニットは、画面の幅と高さに応じて自動サイズ変更されます。
私はこの解決策を見つけました、そしてそれは私にとって非常にうまくいきます：
/* 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つの方法は、テキストサイズを物理的なセンチメートルやインチなどの物理的な単位に固定することです。これは画面の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に対して正しく構成されている限り、異なるクラスのアイテムに物理単位のフォントサイズが割り当てられています。
画面までの距離（本を読む距離）が通常である限り、物理単位のフォントは常に大きすぎたり小さすぎたりすることはありません。
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;
}
}
次の式を使用します。
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
1440および768よりも大きいまたは小さいものについては、静的な値を指定するか、同じアプローチを適用できます。
vwソリューションの欠点は、スケール比を設定できないことです。たとえば、画面解像度1440で5vwは、アイデアのフォントサイズである60pxフォントサイズになる可能性がありますが、ウィンドウ幅を768に縮小すると、最終的には768になる可能性があります。 12pxであり、必要な最小値ではありません。
このアプローチでは、上限と下限を設定でき、フォントはその間にスケーリングされます。
多くの結論の後、私はこの組み合わせになりました：
@media only screen and (max-width: 730px) {
h2 {
font-size: 4.3vw;
}
}
多くの回答がありますが、メディアクエリと組み合わせた最小または最大関数について言及している人は誰もいませんでした
CSSにはmax（）関数があるため、上記の例はワンライナーになります。
font-size: max(30vw, 30px);
または、最小値と最大値で2倍にします。
font-size: min(max(16px, 4vw), 22px);
これは次と同じです：
font-size: clamp(16px, 4vw, 22px);
次に、これをメディアクエリでラップし、h1、h2、h3、h4、h5、h6に好みの方法で適用することを忘れないでください。
@media (max-width: 600px) {
h1 {
font-size: clamp(16px, 4vw, 22px);
}
}
CSSを使用すると、画面サイズに応じてフォントサイズが変化します。このH1タグが応答していることがわかります。（私が間違っている場合は私を訂正してください）
@media only screen and (max-width: 1000px) {
h1 {
font-size:5em;
}
}
@media only screen and (max-width: 500px) {
h1 {
font-size: 3em;
}
}
@media only screen and (max-width: 300px) {
h1 {
font-size: 2em;
}
}
@media only screen and (max-width: 100px) {
h1 {
font-size: 1em;
}
}
<h1>Resize the browser!</h1>私はこれが次のように仕事をするだろうと思います：
3.3vwは、ビューポート幅の3.3％を意味します。
これは、画面のサイズが変化しても常に応答します。
h1{
font-size: 3.3vw;
}
基本フォントサイズを設定し、クランプ機能でクランプします。
これらの例のように、フォントサイズにclamp（）を使用すると、ビューポートのサイズに応じて大きくなるが、最小フォントサイズを下回らないフォントサイズを設定できます。
[https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()][クランプメソッドMDNDocs]
これが例です。
h1 {
font-size: clamp(1.5em, 4vw, 2.5em);
}
h2 {
font-size: clamp(1.2em, 4vw, 2.4em);
}
p {
font-size: clamp(0.6em, 4vw, 1.2em);
}
フォントのサイズ変更に関して簡単な解決策はないのではないかと思います。メディアクエリを使用してフォントサイズを変更できますが、技術的にはスムーズにサイズ変更されません。たとえば、次を使用する場合：
@media only screen and (max-width: 320px){font-size: 3em;}
font-size300ピクセルと200ピクセルの幅の両方で3emになります。font-sizeただし、完全な応答性を得るには、幅を200pxに下げる必要があります。
それで、本当の解決策は何ですか？唯一の方法があります。テキストを含むPNG画像（背景が透明）を作成する必要があります。その後、画像を簡単に応答させることができます（例：幅：35％、高さ：28px）。このようにして、テキストはすべてのデバイスで完全に応答します。
これが私のために働いたものです。私はそれをiPhoneでのみテストしました。
h1、、、h2またはタグがあるかどうかにかかわらず、pこれをテキストの周りに配置します。
<h1><font size="5">The Text you want to make responsive</font></h1>
これにより、デスクトップに22ptのテキストがレンダリングされ、iPhoneでも読み取り可能になります。
<font size="5"></font>