Mise à l'échelle de la police en fonction de la largeur du conteneur

Question

J'ai du mal à me faire à l'idée de la mise à l'échelle des polices.

J'ai actuellement un site web avec un corps font-size de 100 %. 100% de quoi ? Cela semble être calculé à 16 pixels.

J'avais l'impression que le pourcentage de 100 % correspondait à la taille de la fenêtre du navigateur, mais apparemment non, car il est toujours de 16 pixels, que la fenêtre soit réduite à la largeur d'un téléphone portable ou à celle d'un grand écran de bureau.

Comment faire pour que le texte de mon site soit mis à l'échelle par rapport à son conteneur ? J'ai essayé d'utiliser em mais cela ne fonctionne pas non plus.

Mon raisonnement est le suivant : des éléments tels que mon menu sont écrasés lorsque vous redimensionnez, et je dois donc réduire la taille de l'image. px font-size de .menuItem entre autres éléments par rapport à la largeur du conteneur. (Par exemple, dans le menu d'un grand bureau, 22px fonctionne parfaitement. Passez à la largeur de la tablette et 16px est plus approprié).

Je suis conscient que je peux ajouter des points d'arrêt, mais je veux vraiment que le texte soit mis à l'échelle en tant que bien comme ayant des points d'arrêt supplémentaires, sinon, je vais me retrouver avec des centaines de points d'arrêt pour chaque diminution de 100 pixels de la largeur pour contrôler le texte.

Answer 1

EDIT : Si le conteneur n'est pas le corps CSS Tricks couvre toutes vos options en Adapter le texte à un conteneur .

Si le conteneur est le corps, ce que vous recherchez est Longueurs des vues en pourcentage :

Le site longueurs de pourcentage d'affichage sont relatives à la taille de la bloc de contention initial . Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, elles sont mises à l'échelle en conséquence. Toutefois, lorsque la valeur du paramètre overflow de l'élément Root est auto, les barres de défilement sont supposées ne pas exister.

Les valeurs sont :

• vw (% de la largeur de la fenêtre)
• vh (% de la hauteur de la fenêtre)
• vi (1% de la taille de la fenêtre d'affichage dans la direction de l'axe en ligne de l'élément racine)
• vb (1% de la taille de la fenêtre d'affichage dans la direction de l'axe du bloc de l'élément racine)
• vmin (la plus petite des vw ou vh )
• vmax (le plus grand ou vw ou vh )

1 v* est égal à 1% du bloc contenant initial.

Son utilisation ressemble à ceci :

p {
    font-size: 4vw;
}

Comme vous pouvez le constater, lorsque la largeur de la fenêtre d'affichage augmente, les valeurs de la font-size sans avoir besoin d'utiliser des requêtes média.

Ces valeurs constituent une unité de dimensionnement, tout comme le sont les valeurs suivantes px ou em Ils peuvent donc être utilisés pour dimensionner d'autres éléments, comme la largeur, la marge ou le rembourrage.

La prise en charge des navigateurs est assez bonne, mais vous aurez probablement besoin d'une solution de repli, par exemple :

p {
    font-size: 16px;
    font-size: 4vw;
}

Consultez les statistiques de soutien : http://caniuse.com/#feat=viewport-units .

Consultez également CSS-Tricks pour un aperçu plus large : Typographie au format Viewport

Voici un bon article sur la façon de fixer des tailles minimales/maximales et d'exercer un peu plus de contrôle sur les tailles : Contrôle précis de la typographie réactive

Et voici un article sur la façon de définir votre taille à l'aide de calc() afin que le texte remplisse la fenêtre d'affichage : http://codepen.io/CrocoDillon/pen/fBJxu

Vous pouvez également consulter cet article, qui utilise une technique appelée "molten leading" pour ajuster la hauteur des lignes. Plombage fondu en CSS

Answer 2

Mais qu'en est-il si le conteneur n'est pas le viewport (corps) ?

Cette question est posée dans un commentaire d'Alex sous la réponse acceptée .

Ce fait ne signifie pas vw ne peut être utilisé dans une certaine mesure pour dimensionner ce conteneur. Pour voir une quelconque variation, il faut supposer que le conteneur est, d'une manière ou d'une autre, flexible en termes de taille. Que ce soit par un pourcentage direct width ou en étant 100% moins les marges. Le point devient "discutable" si le conteneur est toujours réglé sur, disons, 200px large - alors il suffit de définir une font-size qui fonctionne pour cette largeur.

Exemple 1

Avec un conteneur de largeur flexible, cependant, il faut réaliser que d'une certaine manière le conteneur est sont toujours dimensionnés en dehors de la fenêtre d'affichage . En tant que tel, il s'agit d'ajuster une vw en fonction de ce pourcentage de différence de taille par rapport à la fenêtre d'affichage, ce qui signifie qu'il faut tenir compte du dimensionnement des enveloppes parentales. Prenez cet exemple :

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

En supposant ici que le div est un enfant de la body c'est 50% de ce 100% width, qui est la taille de la fenêtre d'affichage dans ce cas de base. En fait, vous voulez définir un vw qui va vous plaire. Comme vous pouvez le voir dans mon commentaire sur le contenu CSS ci-dessus, vous pouvez " réfléchir " mathématiquement à la taille complète de la fenêtre d'affichage, mais vous ne pouvez pas besoin de pour ce faire. Le texte va "fléchir" avec le conteneur parce que le conteneur fléchit avec le redimensionnement de la fenêtre d'affichage. MISE À JOUR : voici un exemple de deux conteneurs de taille différente .

Exemple 2

Vous pouvez contribuer à garantir le dimensionnement des fenêtres d'affichage en forçant le calcul sur cette base. Prenons l'exemple suivant :

html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

Le dimensionnement est toujours basé sur la fenêtre d'affichage, mais il est essentiellement basé sur la taille du conteneur lui-même.

La taille du conteneur doit-elle changer dynamiquement...

Si le dimensionnement de l'élément conteneur finissait par changer dynamiquement sa relation en pourcentage soit via @media ou via JavaScript, la "cible" de base, quelle qu'elle soit, devrait être recalculée pour maintenir la même "relation" pour la taille du texte.

Prenons l'exemple n°1 ci-dessus. Si le div est passé à 25% largeur par soit @media ou JavaScript, alors dans le même temps, la font-size devra s'adapter, soit dans la requête média, soit par JavaScript, au nouveau calcul de l'indice 5vw * .25 = 1.25 . La taille du texte sera ainsi identique à celle qu'il aurait eu si la "largeur" de l'original avait été la même. 50% a été réduit de moitié en raison du dimensionnement de la fenêtre d'affichage, mais il a maintenant été réduit en raison d'un changement dans son propre calcul du pourcentage.

Un défi

Avec le CSS3 calc() fonction en cours d'utilisation, il deviendrait difficile de l'ajuster dynamiquement, car cette fonction ne fonctionne pas pour les font-size à l'heure actuelle. Vous ne pouvez donc pas effectuer un ajustement purement CSS 3 si votre largeur change sur calc() . Bien sûr, un ajustement mineur de la largeur pour les marges peut ne pas être suffisant pour justifier un changement de font-size donc cela n'a pas d'importance.

Answer 3

Il y a une grande philosophie pour cette question.

La chose la plus simple à faire serait de donner une certaine taille de police à body (je recommande 10), et ensuite tous les autres éléments auraient leur police en format em ou rem . Je vais vous donner un exemple pour comprendre ces unités. Em est toujours relative à son parent :

body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels  = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */

Rem est toujours relative au corps :

body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */

Et puis vous pourriez créer un script qui modifierait la taille de la police par rapport à la largeur de votre conteneur. Mais ce n'est pas ce que je recommanderais. Parce que dans un conteneur de 900 pixels de largeur par exemple, vous auriez une p avec une taille de police de 12 pixels, par exemple. Avec votre idée, cela deviendrait un conteneur de 300 pixels de large avec une taille de police de 4 pixels. Il doit y avoir une limite inférieure.

Une autre solution consisterait à utiliser des requêtes média, afin de pouvoir définir une police pour différentes largeurs.

Mais la solution que je recommande est d'utiliser une bibliothèque JavaScript qui vous aide dans ce domaine. Et fittext.js que j'ai trouvé jusqu'à présent.

Answer 4

100% est relatif à la taille de la police de base, qui, si vous ne l'avez pas définie, est la valeur par défaut de l'agent utilisateur du navigateur.

Pour obtenir l'effet recherché, j'utiliserais un morceau de code JavaScript pour ajuster la taille de la police de base en fonction des dimensions de la fenêtre.

Answer 5

Vous êtes peut-être à la recherche de quelque chose comme ça :

http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/

J'ai utilisé Type de flux et cela fonctionne très bien (cependant, il s'agit de JavaScript et non d'une solution purement CSS) :

$('body').flowtype({
    minFont: 10,
    maxFont: 40,
    minimum: 500,
    maximum: 1200,
    fontRatio: 70
});