Mise à l'échelle des polices en fonction de la taille du conteneur

Question

J'ai du mal à comprendre le problème de mise à l'échelle des polices.

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

J'avais l'impression que 100 % faisait en quelque sorte référence à la taille de la fenêtre du navigateur, mais apparemment pas, puisqu'elle est toujours de 16 pixels, que la fenêtre soit redimensionnée à la largeur d'un mobile ou à un ordinateur de bureau à écran large.

Comment faire en sorte que le texte soit à l'échelle d'un site Web par rapport à son conteneur ? J'ai essayé d'utiliser em mais cela ne s'adapte pas non plus.

Mon raisonnement est que des éléments comme mon menu sont écrasés lorsque vous le redimensionnez, je dois donc réduire le px de .menuItem .menuItem 的 px font-size 以及其他与容器宽度相关的元素。 （例如，在大桌面上的菜单中，22px 效果很好。向下移动到平板电脑宽度，16px et d'autres avec des éléments liés à la largeur du conteneur . (Par exemple, dans un menu sur un grand bureau, 22px fonctionne bien. En descendant vers la largeur de la tablette, 16px est plus approprié.)

Je sais que je pourrais ajouter des points d'arrêt, mais je veux vraiment que le texte soit mis à l'échelle joliment comme si j'avais des points d'arrêt supplémentaires, sinon je me retrouverais avec des centaines de points d'arrêt tous les 100 pixels que je contrôle la largeur du texte.

Answer 1

Cette question a reçu une réponse de Alex à 2507rkt3.

Le fait que

ne veut pas dire vw 不能在某种程度上用于确定该容器的大小。现在要看到任何变化，我们必须假设容器在某种程度上是尺寸灵活的。无论是通过直接百分比宽度还是通过100%减去边距。如果容器总是设置为，比方说，200px 宽，那么这一点就变得“没有意义”——然后只需设置适合该宽度的font-size. p>

Exemple 1

Cependant, pour les conteneurs avec des largeurs flexibles, il est important de réaliser que le conteneur se redimensionne toujours en fonction de la fenêtre d'affichage dans une certaine mesure. Par conséquent, le paramètre doit être ajusté en fonction de la différence de taille en pourcentage par rapport à la fenêtre d'affichage, ce qui signifie prendre en compte la taille du wrapper parent. vwRegardez 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;
}

Supposons ici que div soit un enfant de body, qui a une largeur 50% de 100%, dans ce cas Fondamentalement, c'est la taille de la fenêtre. En gros, vous souhaitez mettre en place un

qui vous ressemble. Comme vous pouvez le voir dans les commentaires ci-dessus dans le contenu CSS, vous pouvez « penser » mathématiquement à la taille entière de la fenêtre d'affichage, mais ce n'est pas nécessaire. Le texte se « pliera » avec le conteneur car celui-ci se pliera à mesure que la fenêtre d'affichage est redimensionnée.

Voici des exemples de deux conteneurs de tailles différentesdiv 是 body 的子级，它是 100% 的 50%宽度，在这种基本情况下是视口大小。基本上，您想要设置一个对您来说看起来不错的 vw.

Exemple 2

Vous pouvez contribuer à garantir la taille de la fenêtre d'affichage en forçant les calculs basés sur cela.

Considérons cet exemple  :

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

Les dimensions sont toujours basées sur la fenêtre d'affichage, mais sont essentiellement définies en fonction des dimensions du conteneur elles-mêmes.

Si la taille du conteneur change dynamiquement...

Si la taille de l'élément conteneur finit par changer sa relation de pourcentage de manière dynamique via les points d'arrêt @media ou JavaScript, alors quel que soit l'« objectif » sous-jacent, il devra être recalculé pour conserver la même « relation » utilisée pour redimensionner le texte

.

Prenons l'exemple n°1 ci-dessus. Si cette option est adoptée, la "largeur" ​​du conteneur est de la même taille lorsqu'elle est réduite de moitié par rapport à la taille de la fenêtre d'affichage, mais réduit désormais son propre calcul de pourcentage en raison du changement.

@media 或 JavaScript 将 div 宽度切换为 25% 宽度，则同时 font-size 需要在媒体查询中或通过 JavaScript 进行调整，以适应新的计算结果 5vw * .25 = 1.25。这将使文本大小与原始 50%Défi

Utilisez CSS calc() 函数 在使用中，动态调整会变得困难，因为该函数目前无法用于 font-size 目的。因此，如果 calc() 上的宽度发生变化，则无法进行纯 CSS 调整。当然，对边距宽度的微小调整可能不足以保证对 font-size pour apporter des modifications, cela n'a donc peut-être pas d'importance.

Answer 2

Container Query est probablement la meilleure option actuellement, en fonction de votre cas d'utilisation, et est prise en charge par tous les principaux navigateurs. Veuillez vérifier les niveaux de support ici : https://caniuse.com/mdn-css_properties_container

Maintenant, c'est facile à contrôler

.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}