Taille de police réactive en CSS

J'ai créé un site en utilisant la grille Zurb Foundation 3 . Chaque page a un grand 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 -->

Lorsque je redimensionne le navigateur à la taille mobile, la grande police ne s'ajuste pas et fait en sorte que le navigateur inclue un défilement horizontal pour s'adapter au grand texte.

J'ai remarqué que sur la page d'exemple de typographie de Zurb Foundation 3 , les en-têtes s'adaptent au navigateur lorsqu'il est compressé et développé.

Suis-je en train de manquer quelque chose de vraiment évident? Comment puis-je y parvenir?

Le font-sizene répondra pas comme ceci lors du redimensionnement de la fenêtre du navigateur. Au lieu de cela, ils répondent aux paramètres de zoom / taille du navigateur, comme si vous appuyez simultanément sur Ctrlet +sur le clavier dans le navigateur.

Requêtes médias

Vous devriez envisager d'utiliser des requêtes multimédias pour réduire la taille de la police à certains intervalles où cela commence à casser votre conception et à créer des barres de défilement.

Par exemple, essayez d'ajouter ceci à l'intérieur de votre CSS en bas, en changeant la largeur de 320 pixels là où votre conception commence à se casser:

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

   body { 
      font-size: 2em; 
   }

}

Longueurs de pourcentage de fenêtre

Vous pouvez également utiliser des longueurs de pourcentage viewport tels que vw, vh, vminet vmax. Le document officiel du W3C pour ceci indique:

Les longueurs en pourcentage de la fenêtre sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, elles sont mises à l'échelle en conséquence.

Encore une fois, à partir du même document W3C, chaque unité individuelle peut être définie comme suit:

vw unit - Égal à 1% de la largeur du bloc contenant initial.

vh unit - Égal à 1% de la hauteur du bloc contenant initial.

Unité vmin - Égal au plus petit de vw ou vh.

Unité vmax - Égal au plus grand de vw ou vh.

Et ils sont utilisés exactement de la même manière que toute autre valeur CSS:

.text {
  font-size: 3vw;
}

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

La compatibilité est relativement bonne comme on peut le voir ici . Cependant, certaines versions d'Internet Explorer et Edge ne prennent pas en charge vmax. De plus, iOS 6 et 7 ont un problème avec l'unité vh, qui a été corrigé dans iOS 8.

Vous pouvez utiliser la valeur de la fenêtre d'affichage au lieu de ems, pxs ou pts:

1vw = 1% de la largeur de la fenêtre

1vh = 1% de la hauteur de la fenêtre

1vmin = 1vw ou 1vh, la valeur la plus petite étant retenue

1vmax = 1vw ou 1vh, la valeur la plus élevée étant retenue

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

De CSS-Tricks: Typographie de taille de fenêtre

J'ai essayé de résoudre ce problème et je pense avoir trouvé une solution:

Si vous pouvez écrire votre application pour Internet Explorer 9 (et versions ultérieures) et tous les autres navigateurs modernes prenant en charge CSS calc (), les unités rem et les unités vmin. Vous pouvez l'utiliser pour obtenir du texte évolutif sans interrogation multimédia:

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

Le voici en action: http://codepen.io/csuwldcat/pen/qOqVNO

Utilisez des mediaspécificateurs CSS (c'est ce qu'ils utilisent [zurb]) pour un style réactif:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Si cela ne vous dérange pas d'utiliser une solution jQuery, vous pouvez essayer le plugin TextFill

jQuery TextFill redimensionne le texte pour qu'il tienne dans un conteneur et rend la taille de police aussi grande que possible.

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

Il existe plusieurs façons d'y parvenir.

Utilisez une requête multimédia , mais elle nécessite des tailles de police pour plusieurs points d'arrêt:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

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

Utilisez les dimensions en % ou em . Modifiez simplement la taille de la police de base et tout changera. Contrairement au précédent, vous pouvez simplement changer la police du corps et non h1 à chaque fois ou laisser la taille de police de base être la valeur par défaut de l'appareil et le reste tout en em:

1. «Ems» (em) : Le «em» est une unité évolutive. Un em est égal à la taille de police actuelle, par exemple, si la taille de police du document est de 12 pt, 1 em est égal à 12 pt. Les em sont de nature évolutive, donc 2 em correspondraient à 24 pt, 0,5 em serait égal à 6 pt, etc.
2. Pourcentage (%) : l'unité de pourcentage ressemble beaucoup à l'unité «em», à l'exception de quelques différences fondamentales. Tout d'abord, la taille de police actuelle est égale à 100% (soit 12 pt = 100%). Lorsque vous utilisez l'unité de pourcentage, votre texte reste entièrement évolutif pour les appareils mobiles et pour l'accessibilité.

Voir kyleschaeffer.com / ....

CSS 3 prend en charge de nouvelles dimensions relatives au port de vue. Mais cela ne fonctionne pas sur Android:

1. 3,2 vw = 3,2% de la largeur de la fenêtre
2. 3,2 vh = 3,2% de la hauteur de la fenêtre
3. 3.2vmin = plus petit de 3.2vw ou 3.2vh

4. 3.2vmax = plus grand de 3.2vw ou 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Voir CSS-Tricks ... et regardez aussi Can I Use ...

Il existe une autre approche pour les tailles de police réactives - en utilisant les unités rem.

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

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Plus loin dans les requêtes multimédias, vous pouvez ajuster toutes les tailles de police en modifiant la taille de police de base:

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

Pour que cela fonctionne dans Internet Explorer 7 et Internet Explorer 8, vous devrez ajouter un remplacement avec des unités px:

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

Si vous développez avec moins , vous pouvez créer un mixin qui fera le calcul pour vous.

Prise en charge des unités Rem - http://caniuse.com/#feat=rem

La solution "vw" a un problème lors du passage à de très petits écrans. Vous pouvez définir la taille de base et monter à partir de là avec calc ():

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

Ceci est partiellement mis en œuvre dans la fondation 5.

Dans le fichier _type.scss, ils ont deux ensembles de variables d'en-tête:

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

Pour les moyennes, ils génèrent des tailles basées sur le premier ensemble de variables:

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

Et pour les petits écrans par défaut, c'est-à-dire qu'ils utilisent un deuxième ensemble de variables pour générer du 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; }

Vous pouvez utiliser ces variables et remplacer dans votre fichier scss personnalisé pour définir les tailles de police pour les tailles d'écran respectives.

Une taille de police réactive peut également être effectuée avec ce code JavaScript appelé FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Typographie Web réactive à son meilleur: taille de police basée sur la largeur de l'élément.

Ou ce code JavaScript appelé FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - Rend les tailles de police flexibles. Utilisez ce plugin sur votre conception réactive pour un redimensionnement basé sur le rapport de vos titres.

Si vous utilisez un outil de construction, essayez Rucksack.

Sinon, vous pouvez utiliser des variables CSS (propriétés personnalisées) pour contrôler facilement les tailles de police minimale et maximale comme ceci ( démo ):

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

J'ai vu un excellent article de CSS-Tricks . Cela fonctionne très bien:

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

Par exemple:

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

Nous pouvons appliquer la même équation à la line-heightpropriété pour la modifier également avec le navigateur.

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

Je venais juste de proposer une idée avec laquelle il suffit de définir la taille de la police une fois par élément, mais elle est toujours influencée par les requêtes des médias.

Tout d'abord, j'ai défini la variable "--text-scale-unit" sur "1vh" ou "1vw", selon la fenêtre d'affichage à l'aide des requêtes multimédias.

Ensuite, j'utilise la variable en utilisant calc () et mon numéro de multiplicateur pour la taille de police:

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

Dans mon exemple, j'ai uniquement utilisé l'orientation de la fenêtre, mais le principe devrait être possible avec toutes les requêtes multimédias.

"FitText" de jQuery est probablement la meilleure solution d'en-tête réactive. Découvrez-le sur GitHub: https://github.com/davatron5000/FitText.js

Comme avec de nombreux frameworks, une fois que vous "sortez de la grille" et remplacez le CSS par défaut du framework, les choses vont commencer à se casser à gauche et à droite. Les cadres sont intrinsèquement rigides. Si vous deviez utiliser le style H1 par défaut de Zurb avec leurs classes de grille par défaut, la page Web devrait s'afficher correctement sur mobile (c'est-à-dire sensible).

Cependant, il semble que vous souhaitiez de très gros en-têtes 6.2em, ce qui signifie que le texte devra rétrécir afin de tenir dans un écran mobile en mode portrait. Votre meilleur pari est d'utiliser un plugin jQuery de texte réactif tel que FlowType et FitText . Si vous voulez quelque chose de léger, alors vous pouvez consulter mon plugin Scalable Text jQuery:

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

Exemple d'utilisation:

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

Dans Sass original réel (pas scss), vous pouvez utiliser les mixins ci-dessous pour définir automatiquement le paragraphe et tous les titres.font-size .

Je l'aime car il est beaucoup plus compact. Et plus rapide à taper. En dehors de cela, il offre les mêmes fonctionnalités. Quoi qu'il en soit, si vous voulez toujours vous en tenir à la nouvelle syntaxe - scss, n'hésitez pas à convertir mon contenu Sass en scss ici: [CONVERTIR SASS EN SCSS ICI]

Ci-dessous, je vous donne quatre mixins Sass. Vous devrez modifier leurs paramètres selon vos besoins.

=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

Une fois que vous avez fini de jouer avec les paramètres, appelez simplement un mixage - qui est: + config-and-run-font-generator () . Voir le code ci-dessous et les commentaires pour plus d'informations.

Je suppose que vous pouvez le faire automatiquement pour une requête multimédia comme cela est fait pour les balises d'en-tête, mais nous utilisons tous des requêtes multimédias différentes, donc ce ne serait pas approprié pour tout le monde. J'utilise une approche de conception axée sur le mobile, c'est ainsi que je ferais cela. N'hésitez pas à copier et utiliser ce code.

COPIEZ ET COLLEZ CES MIXINS DANS VOTRE FICHIER:

=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

CONFIGUREZ TOUS LES MIXINS À VOS BESOINS - JOUEZ AVEC! :) ET PUIS L'APPELER EN HAUT DE VOTRE CODE SASS RÉEL AVEC:

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

Cela générerait cette sortie. Vous pouvez personnaliser les paramètres pour générer différents ensembles de résultats. Cependant, comme nous utilisons tous des requêtes multimédias différentes, certains mixins devront être modifiés manuellement (style et média).

CSS GÉNÉRÉ:

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;

}

J'utilise ces classes CSS, et elles rendent mon texte fluide sur n'importe quelle taille d'écran:

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

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

Il existe les moyens suivants pour y parvenir:

1. Utiliser rem pour par exemple 2.3 rem
2. Utilisez em pour par exemple 2.3em
3. Utilisez% pour par exemple 2,3%. De plus, vous pouvez utiliser: vh, vw, vmax et vmin.

Ces unités se redimensionneront automatiquement en fonction de la largeur et de la hauteur de l'écran.

Vous pouvez rendre la taille de police sensible si vous la définissez dans vw (largeur de la fenêtre d'affichage). Cependant, tous les navigateurs ne le prennent pas en charge. La solution consiste à utiliser JavaScript pour modifier la taille de police de base en fonction de la largeur du navigateur et définir toutes les tailles de police en%.

Voici un article décrivant comment créer des polices réactives: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

J'ai trouvé cette solution, et cela fonctionne très bien pour moi:

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

Une façon de résoudre le problème du bon rendu du texte à la fois sur un ordinateur de bureau et un mobile / une tablette consiste à fixer la taille du texte à des unités physiques telles que des centimètres physiques ou des pouces, qui ne dépendent pas de l'écran PPI (points par pouce).

Sur la base de cette réponse , voici le code que j'utilise à la fin du document HTML pour une taille de police réactive:

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

Dans le code ci-dessus, les éléments d'une classe différente se voient attribuer des tailles de police en unités physiques, tant que le navigateur / système d'exploitation est correctement configuré pour le PPI de son écran.

Une police d'unité physique n'est toujours ni trop grande ni trop petite, tant que la distance à l'écran est habituelle (distance de lecture d'un livre).

La taille du texte peut être définie avec une vwunité, ce qui signifie la "largeur de la fenêtre d'affichage". De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur:

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

Pour mon projet personnel, j'ai utilisé vw et @meida. Cela fonctionne parfaitement.

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

Utilisez cette équation:

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

Pour tout élément supérieur ou inférieur à 1440 et 768, vous pouvez lui attribuer une valeur statique ou appliquer la même approche.

L'inconvénient de la solution vw est que vous ne pouvez pas définir un rapport d'échelle, disons qu'un 5vw à la résolution d'écran 1440 peut finir par avoir une taille de police de 60 pixels, la taille de police de votre idée, mais lorsque vous réduisez la largeur de la fenêtre à 768, elle peut finir étant 12px, pas le minimum que vous voulez.

Avec cette approche, vous pouvez définir vos limites supérieure et inférieure et la police se mettra à l'échelle entre les deux.

Nous pouvons utiliser calc () de css

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

La formule mathématique est calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth))))

Codepen

Je crains qu'il n'y ait pas de solution facile en ce qui concerne le redimensionnement des polices. Vous pouvez modifier la taille de la police à l'aide d'une requête multimédia, mais techniquement, elle ne sera pas redimensionnée en douceur. Par exemple, si vous utilisez:

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

votre font-sizesera 3em à la fois pour une largeur de 300 pixels et 200 pixels. Mais vous devez réduire la font-sizelargeur de 200 pixels pour une réactivité parfaite.

Alors, quelle est la vraie solution? Il n'y a qu'une seule façon. Vous devez créer une image PNG (avec un fond transparent) contenant votre texte. Après cela, vous pouvez facilement rendre votre image réactive (par exemple: largeur: 35%; hauteur: 28 px). De cette façon, votre texte sera pleinement réactif avec tous les appareils.

Après de nombreuses conclusions, je me suis retrouvé avec cette combinaison:

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

    h2 {
        font-size: 4.3vw;
    }
}

essaye ça

html { font-size: min(max(16px, 4vw), 22px); }

obtenu depuis https://css-tricks.com/simplified-fluid-typography/

Voici quelque chose qui a fonctionné pour moi. Je ne l'ai testé que sur un iPhone.

Que vous ayez h1, h2ou des pbalises, mettez cela autour de votre texte:

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

Cela rend un texte de 22 pt sur un bureau et il est toujours lisible sur l'iPhone.

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