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

J'ai de texte enveloppé dans <div>s, et tiens à rendre le tout fluide, y compris la taille de police du texte, à savoir le texte redimensionne en réponse à la taille de l'élément conteneur.

Je suis tombé sur un Javasript + CSS solutionmais je me demandais si il est possible de le faire avec de la pure CSS?

source d'informationauteur skyork

  1. 6

    Oui, regardez CSS 3 questions des médias. Vous pouvez fournir des règles de style différent en fonction de la largeur de la fenêtre d'affichage. Cela comprend la modification de la taille de la police.

  2. 32

    Tandis que Jim vous a donné des informations précises, il s'écarte de la question posée légèrement. Responsive design (@media queries) peut modifier le texte en fonction de la taille de l'écran. Ce que je comprends, vous me demandaient s'il est un pur CSS solution pour le fluide taille du texte (continue redimensionnement de texte lors de la taille de la fenêtre de modification).

    Voici un lien vers le css-tricks explication de la nouvelle les techniques de taille de police. S'il vous plaît être conscient ce qui est nouveau et les anciens navigateurs seront plus que probablement avoir quelques problèmes, et que même les plus récents (Chrome + Safari) ne sont pas encore exempt de bogues.

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

    Edit - ajouté le code

  3. 2

    Réponse Courte

    Vous ne pouvez pas avoir de liquide de tailles de police, mais vous le serez quand fenêtre d'affichage de pourcentage longueurs sont largement disponibles.

    Réponse Longue

    Vous devez comprendre ces deux termes: sensible et fluide.

    Sensible signifie que vous faites de votre feuille de style réagissent différemment à différentes tailles de fenêtre. Ceci est fait en utilisant CSS Media Queries. Tout en répondant est l'un des les plus branchés de mots dans la conception web, il signifie surtout coder en dur les CSS pour les différentes absolue des longueurs jusqu'à ce que vous déposez morts de l'ennui.

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

    Exemple

    Disons que vous avez un <div> à l'intérieur du corps du document et que vous souhaitez remplir la moitié de la fenêtre.

    La sensible solution est: est-ce

    @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 la fluide solution:

    body > div {
  width: 50%;
}

    ?

    Quelles sont les limites à nous aujourd'hui est qu'il n'est pas d'un large soutien pour la fenêtre d'affichage-par rapport à des unités de longueur. Ce que vous pouvez faire est de déposer l'ensemble de l'idée de "pur CSS fluide tailles de police" et aller sensible.

  4. 0

    utiliser calc avec media query pour un réactif et fluide police

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