Taille de police réactive en CSS


343

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?


1
Jetez un œil ici: Responsive Font-Size uniquement avec css https://github.com/pavelkukov/Font-Size-Responsive-CSS Demo: http://fiddle.jshell.net/dgJaK/1/show/
pavel

2
Premier lien obsolète je pense

OMG, tant de réponses compliquées. utilisez simplement css rem .
ToolmakerSteve

css rem ne redimensionne pas dynamiquement en fonction de la fenêtre d'affichage. Si vous devez le faire, vous avez besoin de Javascript ou de l'une des réponses CSS3 pures ci-dessous. C'est vraiment seulement quelque chose dont vous avez besoin sur un grand titre.
Evan Donovan

@ToolmakerSteve C'est une chose très naïve à dire, en particulier avec les problèmes de réactivité sur tous les appareils. rem n'est pas vraiment une excellente option, vous semblez simplement ignorer les réponses parce que c'est "compliqué"?
Emobe

Réponses:


289

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.


44
Et alors font-size: 1.5vw;?
Dev_NIX

24
Mieux encore,font-size: calc(12px + 1vw)
Cuzox

3
@Dev_NIX Qu'en est-il?
Christiaan Westerbeek

1
J'ai aimé ce que propose @Cuzox - c'est ce que je cherchais
Eleazar Resendez

@Cuzox Vous devez proposer qu'en tant que réponse, d'autres solutions apportent la voie du test aux petits pour pouvoir utiliser ces méthodes pour tout ce qui est utile. Lorsque vous combinez une hauteur statique comme ça, cela le rend utile
ricks

618

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


2
Je suis actuellement en train de coder uniquement pour le webkit - je suis amoureux de cette mesure merci
iamwhitebox


19
Génial, je peux utiliser vw pour mettre le texte à l'échelle afin qu'il ne soit pas minable sur un bureau! Parfait ... Oh. Huh, maintenant le texte est trop petit pour être lu sur un téléphone. D'accord, je peux simplement utiliser "max (x, y)" pour m'assurer qu'il ne se rétrécit pas au-delà d'une taille minimale. Parfait ... Oh. Hmm. Il semble que "max" ne soit pas correctement pris en charge par Chrome. D'accord, je suppose que je vais à nouveau utiliser "px".
original_username

10
Cela ne me semble pas pratique car la taille devient trop petite dans les mobiles et trop grande dans les ordinateurs de bureau à plus haute résolution.
Mr_Green

7
@Mr_Green: C'est pourquoi vous utilisez des requêtes multimédias. Sur les petites fenêtres, agrandissez la police, sur les grandes fenêtres, réduisez-la.
Alistair

45

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


2
Je dois noter que la différence ici est que l'utilisation de calc pour combiner les deux unités est un moyen facile d'aider à réduire la variance de l'échelle de texte vw à des extrêmes.
csuwldcat

les unités de fenêtre sont idéales pour tout projet qui n'a pas besoin de compatibilité avec les anciens navigateurs. Cette astuce calc fait exactement ce que vous dites, en redimensionnant le texte en douceur (contrairement aux limites strictes fixées par les requêtes multimédias) mais à un ratio moindre (ou supérieur!) Que le changement de taille d'écran
Ward DS

Comment doit-il être utilisé? Je veux dire, si je veux changer la taille de ma police, dois-je changer uniquement l'unité em, uniquement l'unité vmin ou les deux?
snoob dogg

Je suis venu ici pour écrire cette solution extrêmement simple, mais j'ai ensuite vu votre réponse et donné +1. Nous pouvons appliquer cette solution à chaque élément. Par exemple, largeur d'image: calc (50px + 10vw)
y.selimdogan

35

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

}


15

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


13

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


11

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

J'ai utilisé font-size: calc(1.2rem + 1vw)pour un titre. De cette façon, j'ai eu l'avantage d'utiliser une unité non basée sur les pixels (bien que cela ne soit pas applicable ici). J'ai également eu un repli en em simple pour les anciens navigateurs. Enfin, comme cela est devenu un peu petit sur mobile, j'ai utilisé une requête multimédia pour ceux-ci. C'est peut-être trop élaboré, mais il semble faire ce que je voulais.
Evan Donovan

8

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.


6

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

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 :

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.


6

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

Avez-vous une référence à ce sac à dos dont vous parlez?
Peter Mortensen

5

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

Existe-t-il un moyen de faire en sorte que la taille de la police ne soit pas supérieure à la [taille maximale] définie?
Igor Janković,

4

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.


2
Pourquoi n'utilisez-vous pas simplement vminet vmaxau lieu de cette @mediaentreprise?
Gark Garcia

3

"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


2
Cela ne semble pas être une réponse directe à la question de savoir pourquoi la police ne s'ajuste pas. Dans tous les cas, les réponses de lien uniquement ne sont pas encouragées dans SO. Veuillez envisager d'ajouter plus de détails / exemple de code.
Harry

2

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>

Je pense que la mise à l'échelle des textes / le redimensionnement du texte pour une utilisation réactive doit être laissé au navigateur, surtout pour les médias qui recherchent ce pour quoi ils sont conçus.
user254197

2

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;

}

2

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

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
Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question des lecteurs à l'avenir et que ces personnes ne connaissent peut-être pas les raisons de votre suggestion de code.
Tony Babarino

Une explication serait de mise.
Peter Mortensen

1

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.


1

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/


Le lien semble rompu: "403 Interdit. Nginx / 1.10.3"
Peter Mortensen

1

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

1

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


1

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

1

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.


1

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


0

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.


0

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

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

    h2 {
        font-size: 4.3vw;
    }
}


-1

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>

14
Nous sommes en 2015. La balise Font est déconseillée en HTML5.
Dan H

Je pensais que la balise de police était obsolète developer.mozilla.org/en-US/docs/Web/HTML/Element/font Je ne pense pas qu'elle soit encore obsolète, mais ce sera à un moment donné.
Jake

1
@Jake: Il était obsolète en HTML4 et avec HTML5 il est obsolète. L'enlèvement fait suite à la dépréciation, et non l'inverse.
santon
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.