web-dev-qa-db-fra.com

Comment implémenter une taille de police fluide en utilisant du CSS pur

J'ai un texte enveloppé dans <div>s et je voudrais rendre le tout fluide, y compris la taille de la police du texte, c'est-à-dire que le texte se redimensionne lui-même en réponse à la taille de l'élément qui le contient.

Je suis tombé sur une solution Javasript + CSS , mais je me demandais s’il était possible de le faire avec du CSS pur?

htmlcssfluid-layout
16
skyork

Oui, regardez les requêtes de médias CSS 3. Vous pouvez fournir différentes règles de style en fonction de la largeur de la fenêtre. Cela inclut la modification de la taille de la police.

6
Jim

Bien que Jim vous ait donné des informations précises, cela déroge légèrement à la question posée. Le design réactif (requêtes @media) peut modifier le texte en fonction de la taille de l'écran. D'après ce que j'ai compris, vous demandiez s'il existe une solution CSS pure pour une taille de texte fluide (redimensionnement continu du texte lors des changements de taille de la fenêtre). 

Voici un lien vers l'explication css-astuces de la nouvelle techniques de dimensionnement des polices . Sachez que ce sont des nouveaux navigateurs et que les anciens navigateurs auront probablement des problèmes et que même les plus récents (Chrome + Safari) ne sont toujours pas exempts de bugs.

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

Éditer- code ajouté

32
Brett Santore

Réponse courte

Vous ne pouvez pas avoir des tailles de polices fluides, mais vous aurez quand viewport-longueurs en pourcentage sont largement disponibles.

Longue réponse

Vous devez comprendre ces deux termes: responsive et fluid .

Responsive signifie que votre feuille de style répond différemment aux différentes tailles de fenêtre. Ceci est fait en utilisant CSS Media Queries . Bien que responsive soit l’un des mots le plus branché de la conception Web, il s’agit surtout de coder en dur les CSS pour différentes longueurs absolues jusqu’à ce que vous vous perdiez dans l’ennui.

Fluide signifie que vous travaillez avec des unités de longueur relatives telles que des pourcentages. Lorsque vous travaillez avec des unités de longueur relative, chaque taille est calculée automatiquement.

Exemple

Supposons que vous avez un <div> dans le corps du document et que vous voulez qu'il remplisse la moitié de la fenêtre.

La solution responsive est la suivante:

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */

Et le fluide solution:

body > div {
  width: 50%;
}

Alors?

Ce qui nous limite aujourd'hui, c'est qu'il n'y a pas de support large pour les unités de longueur relative de viewport. Ce que vous pouvez faire, c'est abandonner toute l'idée de "CSS pur fluide tailles de police" et aller responsive .

2
AlicanC

utilise calc avec une requête de média pour une police sensible et fluide

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}
0
static_null