Y at-il une chose telle que min-font-size et max-font-size?
J'essaie de créer une police dans un div en réponse à la fenêtre du navigateur. Jusqu'à présent, cela a parfaitement fonctionné, mais la division parente a un max-width sur 525px. Redimensionner davantage le navigateur ne fera pas que la police arrête de redimensionner. Cela m'a fait me demander s'il existe une chose telle que min-font-size ou max-font-size, et si une telle chose n'existe pas, s'il existe un moyen de réaliser quelque chose de similaire.
Je pensais que l’utilisation de pourcentages dans font-size fonctionnerait, mais le texte ne serait pas adapté en conséquence à la division parent. Voici ce que j'ai
Le CSS pour le parent div:
.textField{
background-color:rgba(88, 88, 88, 0.33);
width:40%;
height:450px;
min-width:200px;
max-width:525px;
z-index:2;
}
Le CSS pour le morceau de texte en question:
.subText{
position:relative;
top:-55px;
left:15px;
font-family:"news_gothic";
font-size:1.3vw;
font-size-adjust:auto;
width:90%;
color:white;
z-index:1;
}
J'ai cherché pendant un bon bout de temps sur Internet, mais en vain.
Non, il n'y a pas de propriété CSS pour la taille de police minimale ou maximale. Les navigateurs ont souvent un paramètre pour la taille de police minimale, mais c’est sous le contrôle de l’utilisateur, pas par son auteur.
Vous pouvez utiliser @media requêtes pour définir certains paramètres CSS en fonction d'éléments comme la largeur de l'écran ou de la fenêtre. Dans de tels contextes, vous pouvez par exemple définissez la taille de la police sur une petite valeur spécifique si la fenêtre est très étroite.
Vous pouvez le faire en utilisant une formule et en incluant la largeur de la fenêtre.
font-size: calc(7px + .5vw);
Ceci définit la taille de police minimale à 7px et l’amplifie de .5vw en fonction de la largeur de la fenêtre.
Bonne chance!
Cela fonctionne bien avec CSS.
J'ai traversé les mêmes problèmes et corrigé comme suit.
Utilisez une taille "px" fixe pour une taille maximale à une largeur spécifique et supérieure. Ensuite, pour différentes largeurs plus petites, utilisez un "vw" relatif en tant que pourcentage de l'écran.
Le résultat ci-dessous est qu'il s'adapte aux écrans inférieurs à 960 pixels tout en conservant une taille fixe au-dessus. Juste un rappel, ne pas oublier d'ajouter dans le doc html dans en-tête:
<meta name="viewport" content="width=device-width">
Exemple en CSS:
@media all and (min-width: 960px) {
h1{
font-size: 50px;
}
}
@media all and (max-width: 959px) and (min-width: 600px) {
h1{
font-size: 5vw;
}
}
@media all and (max-width: 599px) and (min-width: 50px) {
h1{
font-size: 6vw;
}
}
J'espère que ça va aider!
J'arrive un peu en retard ici, je n'en tire pas grand crédit, je fais juste un mélange des réponses ci-dessous parce que j'ai été obligé de le faire pour un projet.
Donc, pour répondre à la question: Il n’existe pas de propriété telle que la propriété CSS . Je ne sais pas pourquoi, mais je pense que c'est parce qu'ils ont peur d'une utilisation abusive de cette propriété, mais je ne trouve aucun cas d'utilisation où cela pourrait constituer un problème sérieux.
Quoi qu'il en soit, quelles sont les solutions?
Deux outils nous permettront de le faire: requêtes de média ans propriété vw
1) Il existe une solution "imbécile" consistant à interroger chaque média dans chaque fichier CSS, en changeant la police d’un montant fixe à un autre montant fixe. Cela fonctionne, mais c’est très ennuyeux, et vous n’avez pas un aspect linéaire lisse.
2) Comme l'explique AlmostPitt, il existe une solution brillante pour les minima:
font-size: calc(7px + .5vw);
Le minimum ici serait de 7px en plus de 0,5% de la largeur de la vue. C'est déjà très cool et fonctionne dans la plupart des cas . Il ne nécessite aucune requête de média, il vous suffit de passer du temps à trouver les bons paramètres.
Comme vous avez remarqué que c'est une fonction linéaire, les mathématiques de base vous apprennent que deux points vous trouvent déjà les paramètres. Fixez ensuite simplement la taille de police en pixels que vous souhaitez pour les très grands écrans et la version mobile, puis calculez si vous souhaitez appliquer une méthode scientifique. Pensé, ce n'est absolument pas nécessaire et vous pouvez simplement y aller en essayant.
3) Supposons que vous ayez un client très ennuyeux (comme moi) qui veuille absolument qu'un titre ait une ligne et pas plus. Si vous utilisez la solution AlmostPitt, vous rencontrez des problèmes, car votre police continuera à grossir et si vous avez un conteneur de largeur fixe (comme bootstrap s'arrêtant à 1140px ou quelque chose dans de grandes fenêtres). Ici, je vous suggère d'utiliser également une requête multimédia. En fait, vous pouvez simplement trouver le maximum de taille px que vous pouvez gérer dans votre conteneur avant que l'aspect ne devienne indésirable (pxMax). Ce sera votre maximum. Ensuite, il vous suffit de trouver la largeur d'écran exacte à arrêter (wMax). (Je vous laisse inverser une fonction linéaire par vous-même).
Après cela juste
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
Ensuite, il est parfaitement linéaire et votre taille de police cesse de croître! Notez que vous n'avez pas besoin de placer votre propriété css précédente (calc ...) dans une requête multimédia sous wMax car les requêtes multimédia sont considérées comme plus importantes et écrasent la propriété précédente.
Je ne pense pas qu'il soit utile de faire un extrait pour cela, car vous auriez du mal à le faire sur tout l'écran et ce n'est pas sorcier après tout.
J'espère que cela pourra aider les autres et n'oubliez pas de remercier AlmostPitt pour sa solution.
Le sac à dos est génial, mais vous n'avez pas nécessairement besoin de recourir à des outils tels que Gulp ou Grunt, etc.
J'ai fait un démo en utilisant les propriétés personnalisées CSS (variables CSS) pour contrôler facilement les tailles de police minimale et maximale.
Ainsi:
* {
/* 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);
}
Vous pouvez utiliser Sass pour contrôler les tailles de police minimale et maximale. Voici une solution brillante d'Eduardo Boucas.
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
$responsive-unitless: $responsive / ($responsive - $responsive + 1);
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
$min-breakpoint: $min / $responsive-unitless * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
@if $max {
$max-breakpoint: $max / $responsive-unitless * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
}
}
@if $fallback {
font-size: $fallback;
}
font-size: $responsive;
}
.limit-min {
@include responsive-font(3vw, 20px);
}
.limit-min-max {
@include responsive-font(3vw, 20px, 50px);
}
J'ai obtenu des résultats lisses avec ceux-ci. Il s'écoule régulièrement entre les 3 plages de largeur, comme une fonction continue par morceaux.
@media screen and (min-width: 581px) and (max-width: 1760px){
#expandingHeader {
line-height:5.2vw;
font-size: 5.99vw;
}
#tagLine {
letter-spacing: .15vw;
font-size: 1.7vw;
line-height:1.0vw;
}
}
@media screen and (min-width: 1761px){
#expandingHeader {
line-height:.9em;
font-size: 7.03em;
}
#tagLine {
letter-spacing: .15vw;
font-size: 1.7vw;
line-height:1.0vw;
}
}
@media screen and (max-width: 580px){
#expandingHeader {
line-height:.9em;
font-size: 2.3em;
}
#tagLine {
letter-spacing: .1em;
font-size: .65em;
line-height: .10em;
}
}
Ceci est actuellement proposé dans CSS4
Citation:
Ces deux propriétés permettent à un site Web ou à un utilisateur d’exiger que la taille de la police d’un élément soit serrée dans la plage fournie avec ces deux propriétés. Si la valeur calculée de font-size se situe en dehors des limites créées par font-min-size et font-max-size, la valeur d'utilisation de font-size est limitée aux valeurs spécifiées dans ces deux propriétés.
Cela fonctionnerait réellement comme suit:
.element {
font-min-size: 10px;
font-max-size: 18px;
font-size: 5vw; // viewport-relative units are responsive.
}
Cela signifierait littéralement que la taille de la police sera égale à 5% de la largeur de la fenêtre d'affichage, mais jamais inférieure à 10 pixels et jamais supérieure à 18 pixels.
Malheureusement, cette fonctionnalité n'est encore implémentée nulle part (pas même sur caniuse.com).
Oui, il semble y avoir des restrictions imposées par certains navigateurs dans SVG. L'outil de développement le limite à 8000 pixels; Le graphique généré dynamiquement suivant échoue par exemple dans Chrome.
Essayez http://www.xn--dddele-n2a.de/2018/test-von-svt/
<svg id="diagrammChart"
width="100%"
height="100%"
viewBox="-400000 0 1000000 550000"
font-size="27559"
overflow="hidden"
preserveAspectRatio="xMidYMid meet"
>
<g class="hover-check">
<text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
<set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
end="ExampShow56TestBarRect1.touchend">
</set>
<set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
end="ExampShow56TestBarRect1.mouseout">
</set>
Heinz: -16800
</text>
<rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
<set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
end="ExampShow56TestBarRect1.mouseout">
</set>
<set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
end="ExampShow56TestBarRect1.touchend">
</set>
</rect>
<rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
opacity="0">
</rect>
</g>
</svg>